title: React-toastify showing multiple toast
body: <p>I am building a React app with several components and in at least half of them I am using <code>React-notify</code> and it's working properly in almost all of them except one. In this one when I trigger the toast I'm getting four toasts, one behind the other, but I believe they are not different toasts, since they have the same ID.</p>
  <p>I found this thread <a href="https://github.com/fkhadra/react-toastify/issues/182" rel="nofollow noreferrer">https://github.com/fkhadra/react-toastify/issues/182</a>, here the user was having the same issue as mine, the only exception is that I am not setting <code>autoclose</code>, he even provided a gif showing the problem:</p>
  <p><a href="https://imgur.com/a/8NMMaRa" rel="nofollow noreferrer">https://imgur.com/a/8NMMaRa</a></p>
  <p>The solution according to this thread would be remove all <code>&lt;ToastContainer /&gt;</code> of the components and render it in the app root, which in my case is <code>App.js</code>. I did that, however the toasts are not being shown anymore, I don't know if I've done it right, though.</p>
  <p>Besides that I also tried to set a custom ID and it didn't change anything.</p>
  <p>I am using <code>React-router-dom</code>, maybe this is influencing in something, I couldn't find a proper answer nor in the documentation neither on any other source.</p>
  <p>Here is simplified version of my <code>App.js</code>:</p>
  <pre><code>import Layout from './containers/Layout/Layout';
  
  import { ToastContainer } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  
  import { BrowserRouter, Route, Switch } from 'react-router-dom';
  
  class App extends Component {
    render() {
      return (
        &lt;BrowserRouter&gt;
          &lt;Layout&gt;
            &lt;Switch&gt;
              &lt;Route path=&quot;/clientes&quot; exact component={ClientesControls} /&gt;
              &lt;Route path=&quot;/adm&quot; exact component={AdmControls} /&gt;
              &lt;Route path=&quot;/&quot; component={OrcConfig} /&gt;
              &lt;ToastContainer /&gt;
            &lt;/Switch&gt;
          &lt;/Layout&gt;
        &lt;/BrowserRouter&gt;
      );
    }
  }
  </code></pre>
  <p>Here is a sample of the componente whose bug is being generated:</p>
  <pre><code>import React from 'react';
  
  import axios from '../../../axios';
  
  import { toast } from 'react-toastify';
  
  const listarProdutosItens = props =&gt; {
      
      const excluirItemHandler = i =&gt; {
          
          let key = props.listaItens[i].key
          let categoria = props.listaItens[i].categoria
  
          axios.delete(`/adm/${categoria}/${key}.json`)
              .then(res =&gt; {
                  props.fetchLista()
                  notify('excluído')
              })
              .catch(error =&gt; notify('não excluído'))
      }
  
      const notify = (arg) =&gt; {
          if (arg === 'excluído') {
              toast.success('Produto removido com sucesso')
              console.log('TESTE')
          } else if (arg === 'não excluído') {
              toast.error('Erro ao tentar remover produto')
          }
      }
  
      return (
          &lt;div className=&quot;row border-bottom mt-2&quot;&gt;
              &lt;button onClick={() =&gt; excluirItemHandler(i)} &gt;&lt;/button&gt;
              {/* &lt;ToastContainer /&gt; */}
          &lt;/div&gt;
      )
  
  }
  </code></pre>
  <p>The components that are working properly have the same sintaxe.</p>
  <p>Any help would be very appreciated.</p>