react-toastify shows before i click

Question

I've madenotify function which takes parameter

const notify = (error) => {
    toast.error(error)
}

and dom as

<button onClick={notify(error)}>Submit</button>

where error is my useState hook , which is set if something is fetched from redux rtk. I've put setError which listen through useEffect hook as following

const [loginUser, {data, isError, emessage}] = useLoginUserMutation();
const [error, setError] = useState('')
useEffect(() => {
   if(isError){
      setError(emessage.data.errors)
   }
},[isError, data, emessage])

I tried to use something like this way

useEffect(() => {
   if(isError){
   toast(emessage.data.errors)
}
})

which fortunately works only in second times , weirdly shows blank popups in first error message in two popup at same time then stops.

Is there something I'm doing wrong? Thank you for your help.

Answer 1

You need to pass it in as a callback, not directly execute it on render:

<button onClick={() => notify(error)}>Submit</button>