title: React-toastify duplicating toast
body: <p>I have a mods page in my app which only moderators and administrators should be able to access. If a person tries to access it by directly typing the URL I have some logic that would redirect them.</p>
  <pre><code>import { useHistory } from &quot;react-router&quot;;
  import createNotification from &quot;../../../addNotification&quot;;
  import getRole from &quot;../../../authentication&quot;;
  
  const ModHome = () =&gt; {
      const history = useHistory();
      const role = getRole();
  
      if (![&quot;administrator&quot;, &quot;moderator&quot;].includes(role)) {
          createNotification(&quot;You are not a moderator&quot;, &quot;error&quot;);
          history.push(&quot;/admin-login&quot;);
      }
  
      return (
          &lt;div&gt;
              &lt;h1&gt;Mod page&lt;/h1&gt;
          &lt;/div&gt;
      )
  }
  
  export default ModHome
  </code></pre>
  <p>The logic works fine. I get redirected to the login page but for some reason this happens
  <a href="https://i.stack.imgur.com/xLmoS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xLmoS.png" alt="enter image description here" /></a></p>
  <p>I already checked and the toasts have different IDs and the function gets called only once so why am I getting 2 notifications?</p>
  <p>Update: Here's the createNofication code:</p>
  <pre><code>import {toast} from &quot;react-toastify&quot;;
  
  export default function createNotification(message, type) {
      const options = {
        position: &quot;top-right&quot;,
        autoClose: 5000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
      };
      switch(type) {
        case &quot;success&quot;:
          toast.success(message, options);
          break;
        case &quot;warning&quot;:
          toast.warn(message, options);
          break;
        case &quot;error&quot;:
          toast.error(message, options);
          break;
        case &quot;info&quot;:
          toast.info(message, options);
          break;
      }
  }
  </code></pre>