What is causing this enqueue snackbar error for notistack?

useSnackbar hook accessible anywhere down the tree from SnackbarProvider.

So you cannot use it in the same component as SnackbarProvier.

import AlertContext from "../context/alert/alertContext";import { SnackbarProvider } from "notistack";const Alerts = (props) => {  const alertContext = useContext(AlertContext);  const providerRef = React.useRef();  useEffect(() => {    alertContext.msg !== "" &&      providerRef.current.enqueueSnackbar(alertContext.msg, {        variant: alertContext.type,      });  }, [alertContext]);  return <SnackbarProvider ref={providerRef} maxSnack={4}>       {props.children}       </SnackbarProvider>;};export default Alerts;

Wrap you index file with SnapBar provider:

//index.jsimport { SnackbarProvider } from "notistack";const Index = () => (    <SnackbarProvider maxSnack={1} preventDuplicate>        index    </SnackbarProvider>)export default Index//jsx fileimport { useSnackbar } from "notistack";const Logs = () => {    const { enqueueSnackbar } = useSnackbar();    const handler = () => {        enqueueSnackbar(`Successful.`, { variant: "success" });    };    return <span onClick={handler}>"Logs loading"</span>;};export default Logs;