title: react toastify does not work it gives a div as it output
body: <pre><code>**as you can see i am trying to show toast by using toastify and i install it but still it not working and it gives a div when it render**
  </code></pre>
  <p>import React, { useRef, useState } from 'react';
  import { Spinner } from 'react-bootstrap';
  import { useSendPasswordResetEmail, useSignInWithEmailAndPassword, } from 'react-firebase-hooks/auth';
  import { Link, useLocation, useNavigate } from 'react-router-dom';
  import { toast, ToastContainer } from 'react-toastify';
  import auth from '../../../firebase.init';
  import Loading from '../Loading/Loading';
  import Socailmedia from '../socailmedia/Socailmedia';
  import &quot;./Login.css&quot;</p>
  <pre><code>const Login = () =&gt; {
      const [showpass, setShowpass] = useState(false);
      const navigate = useNavigate()
      const location = useLocation()
      const EmailRef = useRef('');
      const PasswordRef = useRef('');
      const [sendPasswordResetEmail, sending] = useSendPasswordResetEmail(
          auth
      );
  
      const from = location.state?.from?.pathname || &quot;/&quot;;
  
  
  
  
      let errorElement;
      const [
          signInWithEmailAndPassword,
          user,
          loading,
          error,
      ] = useSignInWithEmailAndPassword(auth);
  
      const logInUser = event =&gt; {
          event.preventDefault()
  
          const email = event.target.email.value;
          const password = event.target.password.value;
  
          signInWithEmailAndPassword(email, password)
  
      }
  
      const hendelForgetPssword = async () =&gt; {
          const email = EmailRef.current.value;
          if (email) {
              await sendPasswordResetEmail(email);
              toast(&quot;email sent&quot;);
          }
          else {
              toast('enter your email')
          }
  
      }
  
  
      if (loading || sending) {
          return &lt;Loading&gt;&lt;/Loading&gt;
      }
  
      if (user) {
          navigate(from, { replace: true });
          console.log(user.user.email);
  
          const url = `https://hidden-fortress-66686.herokuapp.com/login`
  
          fetch(url, {
              method: 'POST',
              body: JSON.stringify({
                  email: user.user.email
              }),
              headers: {
                  'Content-type': 'application/json; charset=UTF-8',
              },
          })
              .then(res =&gt; res.json())
              .then((data) =&gt; {
                  console.log(data.token);
                  localStorage.setItem(&quot;accessToken&quot;, data.token) // send token to localsotorage
  
                  navigate('/')
              });
  
  
      }
      if (error) {
          errorElement = &lt;p className='text-danger'&gt;Error: {error?.message}&lt;/p&gt;
      }
  
  
  
      return (
          &lt;div className='from-container'&gt;
              &lt;form onSubmit={logInUser}&gt;
                  &lt;div&gt;
                      &lt;h3 className='from-title text-primary text-center'&gt;Please Login&lt;/h3&gt;
                      &lt;div className=&quot;input-group&quot;&gt;
                          &lt;input type=&quot;email&quot; name=&quot;email&quot; ref={EmailRef} id=&quot;&quot; required placeholder='Enter your Email' /&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;input-group&quot;&gt;
                          &lt;input name=&quot;password&quot; type={showpass ? &quot;text&quot; : &quot;password&quot;} id=&quot;&quot; required placeholder='Enter Password' /&gt;
  
                      &lt;/div&gt;
  
                      &lt;input type=&quot;checkbox&quot; name=&quot;&quot; id=&quot;&quot; onClick={() =&gt; setShowpass(!showpass)} /&gt; &lt;span&gt;see password&lt;/span&gt;
  
                      &lt;p&gt;
                          {
                              loading &amp;&amp; &lt;div className='spinner'&gt;&lt;Spinner animation=&quot;border&quot; variant=&quot;warning&quot; /&gt;&lt;/div&gt;
                          }
                      &lt;/p&gt;
                      {errorElement}
                      &lt;input className='from-submit bg-primary' type=&quot;submit&quot; value=&quot;Login&quot; /&gt;
                  &lt;/div&gt;
                  &lt;div className='d-flex justify-content-around align-items-center'&gt;
                      &lt;div&gt;
                          &lt;Link className='form-link' to='/signup'&gt;Create new account !  &lt;/Link&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;button className='form-link btn btn-link' onClick={hendelForgetPssword}&gt;Forget Password !&lt;/button&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
  
                  &lt;Socailmedia&gt;&lt;/Socailmedia&gt;
                  &lt;ToastContainer&gt;&lt;/ToastContainer&gt;
  
              &lt;/form&gt;
          &lt;/div&gt;
      );
  };
  
  export default Login;
  </code></pre>