title: Uncaught Error: Invalid hook call. Hooks can only be called inside of the body
body: <p>Hello I'mm new to coding and I want to make my signin function using redux, but I have a problem with my code. I'm getting the error:</p>
  <pre><code>Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
      
  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
  See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
  </code></pre>
  <p>This is my code</p>
  <pre><code>import React, { useEffect, useState } from 'react'
  import { Button, Container, Form } from 'react-bootstrap'
  import { useDispatch, useSelector } from 'react-redux'
  import { Link, useLocation, useNavigate } from 'react-router-dom'
  import { login } from '../actions/userAction'
  import ErrorMessageBox from '../components/ErrorMessagebox'
  import Loading from '../components/Loading'
  
  export const SignInScreen = () =&gt; {
    const navigate = useNavigate
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
  
    const { search } = useLocation()
    const redirectInUrl = new URLSearchParams(search).get('redirect')
    const redirect = redirectInUrl ? redirectInUrl : '/'
  
    const userLogin = useSelector((state) =&gt; state.userLogin)
    const { userInfo, loading, error } = userLogin
    const dispatch = useDispatch()
  
    useEffect(() =&gt; {
      if (userInfo) {
        navigate(redirect)
      }
    }, [navigate, userInfo, redirect])
  
    const submitHandler = (e) =&gt; {
      e.preventDefault()
      dispatch(login(email, password))
    }
  
    return (
      &lt;Container className=&quot;small-container&quot;&gt;
        &lt;h1 className=&quot;my-3&quot;&gt;Sign In&lt;/h1&gt;
        {error &amp;&amp; &lt;ErrorMessageBox variant=&quot;danger&quot;&gt;{error}&lt;/ErrorMessageBox&gt;}
        {loading &amp;&amp; &lt;Loading /&gt;}
        &lt;Form onSubmit={submitHandler}&gt;
          &lt;Form.Group className=&quot;mb-3&quot; controlId=&quot;email&quot;&gt;
            &lt;Form.Label&gt;Email&lt;/Form.Label&gt;
            &lt;Form.Control
              type=&quot;email&quot;
              required
              onChange={(e) =&gt; setEmail(e.target.value)}
            /&gt;
          &lt;/Form.Group&gt;
          &lt;Form.Group className=&quot;mb-3&quot; controlId=&quot;password&quot;&gt;
            &lt;Form.Label&gt;Password&lt;/Form.Label&gt;
            &lt;Form.Control
              type=&quot;password&quot;
              required
              onChange={(e) =&gt; setPassword(e.target.value)}
            /&gt;
          &lt;/Form.Group&gt;
          &lt;div className=&quot;mb-3&quot;&gt;
            &lt;Button type=&quot;submit&quot;&gt;Sign In&lt;/Button&gt;
          &lt;/div&gt;
          &lt;div className=&quot;mb-3&quot;&gt;
            New Customer?{' '}
            &lt;Link to={`/signup?redirect=${redirect}`}&gt;Create new account&lt;/Link&gt;
          &lt;/div&gt;
        &lt;/Form&gt;
      &lt;/Container&gt;
    )
  }
  </code></pre>
  <p>When I run <code>npm ls react-dom</code>, it shows</p>
  <p><img src="https://i.stack.imgur.com/TzKD3.png" alt="https://i.stack.imgur.com/TzKD3.png" /></p>
  <p>Plesae help, I don't know what this error means.</p>