title: homepage is not loaded after clicking on login button
body: <p>After clicking on login button I am getting the error in console as :</p>
  <pre><code>Login.js:28
  Uncaught TypeError: loginSubmit is not a function
  </code></pre>
  <p>Login Form.js</p>
  <pre><code>import React, { useState } from 'react'
  import Login from './Login'
  import Home from './Home'
  
  function LoginForm() {
  const [formLogin, setFormLogin] = useState(false)
  
      const loginPage = () =&gt; {
          setFormLogin(true)
      }
      return (
          &lt;&gt;
              &lt;div&gt;
                  {!formLogin ? &lt;Login loginSubmit={loginPage} /&gt; : &lt;Home /&gt;}
              &lt;/div&gt;
      
          &lt;/&gt;
      )
  
  }
  export default LoginForm
  </code></pre>
  <p>Login.js</p>
  <pre><code>import React, { useEffect, useState } from 'react'
  import { useNavigate } from 'react-router-dom'
  import Home from './Home'
  
  function Login({loginSubmit}) {
  const nav = useNavigate()
  
      const [values, setValues] = useState({
          username: '',
          password: ''
      })
      
      const [error, setError] = useState({})
      const [dataCorrect, setDataCorrect] = useState(false)
      
      const changeHandler = (e) =&gt; {
          setValues({ ...values, [e.target.name]: e.target.value })
      }
      
      const handleSubmit = (e) =&gt; {
          e.preventDefault()
          setError(LoginValidation(values))
          setDataCorrect(true)
      }
      
      useEffect(() =&gt; {
          if (Object.keys(error).length === 0 &amp;&amp; dataCorrect) {
              loginSubmit(true)
          } 
      }, [error])
      
      const LoginValidation = (values) =&gt; {
      
          let errors = {}
      
          if (!values.username) {
              errors.username = &quot;Username is required&quot;
          } else if (!values.username.length &lt; 4 &amp;&amp; values.username.length &gt; 6) {
              errors.username = &quot;Username length should be between 4-6&quot;
          }
          if (!values.password) {
              errors.password = &quot;Password is required&quot;
          } else if (!values.password.length &lt; 5 &amp;&amp; values.password.length &gt; 10) {
              errors.password = &quot;Password length should be btw 5-10&quot;
          }
      
          return errors
      }
      
      return (
          &lt;&gt;
              &lt;center&gt;
                  &lt;h1&gt;Login Page&lt;/h1&gt;
                  {/* &lt;form className='w-50 p-3'  onClick={() =&gt; nav('/home')} &gt; */}
                  &lt;form className='w-50 p-3'&gt;
                      &lt;div className='mt-3' &gt;
                          &lt;div className=&quot;form-floating mb-5&quot;&gt;
                              &lt;input type=&quot;text&quot; value={values.username} onChange={changeHandler} name='username' className=&quot;form-control&quot; id=&quot;floatingInput&quot; placeholder=&quot;name@example.com&quot; /&gt;
                              &lt;label htmlFor=&quot;floatingInput&quot;&gt;Username&lt;/label&gt;
                              {error.username &amp;&amp; &lt;p&gt;{error.username}&lt;/p&gt;}
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;div className=&quot;form-floating mb-3&quot;&gt;
                              &lt;input type=&quot;password&quot; name='password' value={values.password} onChange={changeHandler} className=&quot;form-control&quot; id=&quot;floatingPassword&quot; placeholder=&quot;Password&quot; /&gt;
                              &lt;label htmlFor=&quot;floatingPassword&quot;&gt;Password&lt;/label&gt;
                              {error.password &amp;&amp; &lt;p&gt;{error.password}&lt;/p&gt;}
                          &lt;/div&gt;
                      &lt;/div&gt;
      
                      &lt;div&gt;
                          {/* &lt;button className='btn btn-primary mt-3' type='submit' onClick={handleSubmit}&gt;Login&lt;/button&gt; */}
                          &lt;button className='btn btn-primary mt-3' type='submit' onClick={handleSubmit} &gt;Login&lt;/button&gt;
                          &lt;button className='btn btn-info mt-3' onClick={() =&gt; nav('/signup')}&gt;Register&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/center&gt;
          &lt;/&gt;
      )
  
  }
  export default Login
  </code></pre>
  <p>Home.js</p>
  <pre><code>import React from 'react'
  
  const Home = () =&gt; {
      return (
          &lt;div&gt;Welcome to Home Page&lt;/div&gt;
      )
  }
  export default Home
  </code></pre>
  <p>I want home page to be loaded after clicking on login button</p>