How to use react hook as common component with typescript

I have a SnackBar.ts file as below

import { useSnackbar } from 'notistack';    const SnackBar = (message:string, isError?:boolean) => {    const { enqueueSnackbar } = useSnackbar();    return enqueueSnackbar(message, {      anchorOrigin: {        horizontal: 'right',        vertical: 'top'      },      variant: isError ? 'error' : 'success',      style: { whiteSpace: 'pre-line' }    });  };    export default SnackBar;  

So I started use that in my compoonent like below

import { SnackBar } from '../../snackbar';  const mySnack = SnackBar;    useEffect(() => {      console.log('error');      if (!loading && submitForm) {        if (!error) {          mySnack('user updated');        } else {          mySnack(error, true);        }      }    }, [error, loading, submitForm]);  

I'm getting this error "Error: Invalid hook call. Hooks can only be called inside of the body of a function component"

All I wanted to do is use that enqueueSnackbar as a shared method. How can I do that in typescript ?

https://stackoverflow.com/questions/67293761/how-to-use-react-hook-as-common-component-with-typescript April 28, 2021 at 12:26PM