Bug: Toasts won't trigger anymore in v2.6.0 when using useToaster and useToasterStore is used in component which gets unmounted

[joonass-visma]

Steps to reproduce:

1. Have Toaster component implemented with useToaster hook
2. Have Toast component which reads toaster state using useToasterStore
3. Fire toast
4. Dismiss toast or wait for it to dismiss
5. Try to fire another toast --> nothing happens

Suspected root cause: when Toast gets unmounted, it removes wrong listener from the global listener array. So instead of removing the listener that Toast added, it removes the listener that Toaster added, i.e. besides just checking toasterId, it should also verify we are removing correct listener.

// src/core/store.ts

useEffect(() => {
    // ...
    return () => {
      const index = listeners.findIndex(([id]) => id === toasterId); // <-- THE PROBLEM
      if (index > -1) {
        listeners.splice(index, 1);
      }
    };
  }, [toasterId]);

[knownasilya]

Seeing something similar, here's our implementation:

const Toasts = (props: Props) => {
  const {toasts, handlers} = useToaster();
  const {startPause, endPause} = handlers;

  return (
    <FloatingPortal preserveTabOrder={true} root={props.root}>
      <div
        className="z-50"
        style={{
          position: 'fixed',
          bottom: '5.5rem',
          left: '50%',
          transform: 'translateX(-200px)',
        }}
        onMouseEnter={startPause}
        onMouseLeave={endPause}
      >
        {toasts.map((toastInstance) => {
          if (typeof toastInstance.message === 'function') {
            return toastInstance.message(toastInstance);
          }

          return null;
        })}
      </div>
    </FloatingPortal>
  );
};