React does not recognize the `isLoading` prop on a DOM element

[gudlyf]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

When using an MUI icon as the icon, the isLoading prop seems to carry down to the component, which causes this console error.

Example of how we have been using the custom icon. This behavior changed in v10:

import InfoRoundedIcon from '@mui/icons-material/InfoRounded';

 toast(`${data.message}`, {
            containerId: 'notifications',
            icon: <InfoRoundedIcon />,
          });

This now produces the following error, though the toast does appear:

console.js:213 Warning: React does not recognize the `isLoading` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isloading` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at svg
    at https://localhost/static/js/bundle.js:11807:66
    at SvgIcon (https://localhost/static/js/bundle.js:22001:82)
    at InfoRoundedIcon

Also tried this, but no icon appears at all (though there is no error):

import { InfoRounded } from '@mui/icons-material';

 toast(`${data.message}`, {
            containerId: 'notifications',
            icon: InfoRounded,
          });

What is the expected behavior?

Either the isLoading prop does not carry over to the icon, or document proper way to include the custom component.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

MacOS Sonoma / Latest Chrome / Latest React 18

This worked in v9 of react-toastify.

CodeSandbox demo: https://mzdywd.csb.app/

[fkhadra]

Hey @gudlyf, thanks for reporting the issue. I've pushed an update

[tasaboia]

same thing