Notistack: Warning: React does not recognize the `closeSnackbar` prop on a DOM element.

[bugs181]

Receiving a warning when including it into react.

Warning is as follows:

Warning: React does not recognize the `closeSnackbar` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `closesnackbar` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by Modal)
    in ForwardRef(Portal) (created by Modal)
    in Modal (created by ForwardRef(Modal))
    in ForwardRef(Modal) (created by WithTheme(ForwardRef(Modal)))
    in WithTheme(ForwardRef(Modal)) (created by ForwardRef(Dialog))
    in ForwardRef(Dialog) (created by WithStyles(ForwardRef(Dialog)))
    in WithStyles(ForwardRef(Dialog)) (at CreateBotPopup.js:152)
    in SimpleDialog (created by WithStyles(SimpleDialog))
    in WithStyles(SimpleDialog) (created by Context.Consumer)
    in WithSnackbar(WithStyles(SimpleDialog)) (at markets.js:60)
    in div (at markets.js:36)
    in MarketTicker (at markets.js:101)
    in div (at markets.js:99)
    in div (at markets.js:98)
    in div (at markets.js:93)
    in div (at markets.js:92)
    in Markets (at App.js:157)
    in page (created by Context.Consumer)
    in Route (at App.js:142)
    in main (at App.js:136)
    in div (at App.js:62)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:61)
    in PersistentDrawerLeft (at Theme.js:99)
    in ThemeProvider (at Theme.js:99)
    in WithTheme (created by WithStyles(WithTheme))
    in WithStyles(WithTheme) (at src/index.js:9)
    in SnackbarProvider (at src/index.js:9)

Expected Behavior

No warning

Current Behavior

Warning received

Steps to Reproduce

Followed the readme to include into project.

Your Environment

  "dependencies": {
    "@material-ui/core": "^4.0.0-rc.0",
    "@material-ui/icons": "^3.0.2",
    "classnames": "^2.2.6",
    "clsx": "^1.0.4",
    "mui-datatables": "^2.2.0",
    "notistack": "^0.8.6",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.0",
    "react-scripts": "3.0.1",
    "reactn": "^2.0.1"
  },

[iamhosseindhv]

you are probably are exporting your component using withSnackbar and then spreading all your props without taking out closeSnackbar or enqueueSnackbar options.

// bad
const props = this.props;
<div {...props} />

// good
const { enqueueSnackbar, closeSnackbar, ...props } = this.props;
<div {...props} />