## Issue
After calling a toast.* function from within a useEffect hook, the toast
does not appear (see the new test case in toast.test.tsx for an
example).

## Cause
The `useStore` hook (used by `Toaster`) calls "useState" to get the
current state of the global `memoryState`, and then calls "useEffect" to
set up a subscription to the global `memoryState`.

The bug is caused when a change to the global `memoryState` happens
after "useState" is called, but before the "useEffect" callback is run.
This can happen e.g. if we call a toast.* function from within another
component's useEffect hook.

## Solution
To setup the global `memoryState` subscription, we use the
"useLayoutEffect" hook instead. This hook runs the effect synchronously,
so no change to the global `memoryState` can happen before the effect is
run.

## Alternatives
`useSyncExternalStore` is a new hook that is designed to solve this
problem and is built into React; we could use this hook instead:
https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore

-- Issue
Calling a toast.* function before rendering the `<Toaster>` component,
then rendering the `<Toaster>` component, would cause the toast to not
appear or to appear "stacked up" on top of each other.

-- Cause
The `useStore` hook was using `useState` and `useEffect` to subscribe
to the global `memoryState`; unfortunately, in various cases it was
possible for change to occur to `memoryState` before the `useEffect`
callback was called. Since the `useEffect` callback hadn't run, those
changes didn't cause a re-render of the `<Toaster>` component.

-- Solution
Use the `useSyncExternalStore` hook instead of `useState` and
`useEffect`; it handles these cases correctly.

I've added a dependency on the `use-sync-external-store` shim so that
React version below 18 are still supported.

-- Related
timolins#253

…causing-toast-to-not-appear