Toast not working properly

Hi I followed the initial steps to get the toast going with sonner see below, but it is not working.
Expected behaviour:
Toast to work when being called.

What is happening:
Toast gets called on refresh twice, and doesn't get cleared, if I refresh it continues to get called.

Is something else missing?

from route
```
// ... imports

export const action = async ({ request }: ActionFunctionArgs) => {
return jsonWithError(null, 'There are errors in the form')
}
```

from root
```
// ... imports

export const loader = async ({ request }: LoaderFunctionArgs) => {
// ... otherHeaders logic
const { toast, headers: toastHeaders } = await getToast(request)

return json(
{
toast
},
{
headers: {
// ...otherHeaders,
...toastHeaders
}
}
)
}

export default function Home() {
const { toast: serverToast } = useLoaderData()

useEffect(() => {
console.log('serverToast', serverToast)

if (serverToast?.type === 'success') {
toast.success(serverToast.message)
}
if (serverToast?.type === 'error') {
toast.error(serverToast.message)
}
}, [serverToast])

return (



Basic Example With Remix Toast



{children}





)
}
```

using
```
devDeps
@remix-run/dev -> 2.8.1
@remix-run/eslint-config -> 2.8.1

deps
@remix-run/serve -> 2.8.1
@remix-run/react -> 2.8.1
@remix-run/node -> 2.8.1
sonner -> 1.4.0
```

Edit: Just wanted to say congrats with the lib though, fantastic explanation on the blog.