How to render multiple toasts using map loop in react

I am trying to render multiple toasts using .map loop. But it is only the toast with the last element from the loop.

var errorCount = { error1: 50, error2: 101, error3: 70, error4: 105 };
    Object.keys(errorCount).map((element, index) => {
      if (errorCount[element] > 100) {
        console.log(element);
        toast.error(
          "Message Title: " + element + "\nErrors: " + errorCount[element],
          {
            autoClose: false,
            toastId: element,
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: true,
            draggable: true,
            progress: undefined,
            theme: "dark",
          }
        );
      }
    });

The above loop should display "error2" first then "error4". But it is only displaying error4.

I have tried like this and is working for me..

import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

export default function App() {
  var errorCount = { error1: 50, error2: 101, error3: 70, error4: 105 };
  Object.keys(errorCount).map((element, index) => {
    if (errorCount[element] > 100) {
      console.log(element);
      toast.error(
        "Message Title: " + element + "\nErrors: " + errorCount[element],
        {
          autoClose: false,
          toastId: element,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "dark"
        }
      );
    }
  });

  return (
    <div className="App">
      <ToastContainer />
    </div>
  );
}

sandbox url - https://codesandbox.io/s/goofy-worker-1d8kwi?file=/src/App.js:0-797