Toasts do not render correctly when <Toaster> renders after toasts are created

[jluxenberg]

Showcase: https://share.commandbar.com/vsXPEw

Steps to reproduce:

1. queue up two or more toasts before rendering a <Toaster> component
2. render a <Toaster> component

Expected result: Toasts are shown immediately after rendering <Toaster>

Actual result: Either (a) no toasts are shown; or (b) the toasts are "stacked up" on top of each other.

Example app demonstrating issue:

import toast, { Toaster } from 'react-hot-toast';
import React, {useState} from 'react';

import logo from './logo.svg';
import './App.css';

toast.success("Hello World!", {id: "1", duration: Infinity})
toast.success("Goodbye world!", {id: "2", duration: Infinity})

function App() {
  const [state, setState] = useState(false);
  console.log("App re-render", state);
  return (
    <div>
      <button onClick={(() => {
        setState(x => !x)
      })}>toggle toaster</button>
      {state && <Toaster />}
    </div>
  );
}

export default App;

Full demo app here: https://replit.com/@JaredLuxenberg/react-hot-toast-gh-issue-253