I can only type one letter at a time on my Reactjs input

Question

I've created two custom components with input forms in them and I'd simply like to be able to type into them but anytime I type one letter I lose focus and have to click on the input again and again to type one by one. I suspect that this is happening because of the Onchange prop I've put on the inputs that probably rerender. the entire app whenever there is a change. But this Onchange is what I need in order for my app to work so right now I'm in a definite pickle. Any help is appreciated

App.js

import style from "./auth.module.css";
import { useEffect, useRef, useState } from "react";
import { useAuthState } from 'react-firebase-hooks/auth';
import { auth, signInWithEmailAndPassword, signInWithGoogle, registerWithEmailAndPassword } from "../../firebase";
import { CSSTransition } from "react-transition-group";


const Auth = () => {
  const [activeMenu, setActiveMenu] = useState("main");
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [user, loading, error] = useAuthState(auth);

  const Emailform = () => {
    return (
      <div className={style.formBox}>
        <label className={style.label}>Email:</label>
        <form className={style.input}>
          <input 
            type="email" 
            name="email" 
            required="true"
            value={email}
            onChange={(e) => setEmail(e.target.value)}/>
        </form>
      </div>
    );
  }
  
  
  const Passform = () => {
    return (
      <div className={style.formBox}>
        <label className={style.label}>Password:</label>
  
        <form className={style.input}>
          <input 
            type="password" 
            name="password" 
            required="true"
            value={password}
            onChange={(e) => setPassword(e.target.value)} />
        </form>
      </div>
    );
  }

  const ConfirmPass = () => {
    return (
      <div className={style.formBox}>
        <label className={style.label}>Confirm Password:</label>
  
        <form className={style.input}>
          <input 
            type="password" 
            name="password" 
            required="true" />
        </form>
      </div>
    );
  }

  let domNode = useClickOutside(() => {
    setActiveMenu(false);
  });

  return (
    <div className={style.container}>
      <Login />
      <Signup />
    </div>
  );

  function AuthType(props) {
    return (
      <a
        href={props.link}
        className={style.menuItem}
        onClick={() => props.goToMenu && setActiveMenu(props.goToMenu)}
      >
        {props.children}
      </a>
    );
  }


/* Login */
  function Login() {
    return (
      <CSSTransition in={activeMenu === "main"} unmountOnExit timeout={500}>
        <div ref={domNode}>
          <div className={style.login}>
            <h1 className={style.title}>Clip It</h1>
            {/* Email and Password */}
            <Emailform/>
            <Passform/>

            <div className={style.button}>
              <input 
                type="submit" 
                value="Login"
                onClick={() => signInWithEmailAndPassword(email, password)} />
              <input 
                type="submit" 
                value="Login with Google"
                onClick={signInWithGoogle} />
            </div>
            <div className={style.text}>
              <p className={style.plink}>Forgot Password</p>
              <div>
                Need an account?&nbsp;
                <AuthType goToMenu="Signup">click here</AuthType>
              </div>
            </div>
          </div>
        </div>
      </CSSTransition>
    );
  }


  /* SignUp/Register */
  function Signup() {
    return (
      <CSSTransition in={activeMenu === "Signup"} unmountOnExit timeout={500}>
        <div ref={domNode}>
          <div className={style.signUp}>
            <div className={style.title}> Clip It</div>
            <Form label="First Name" type="text" />
            <Form label="Last Name" type="Text" />
            <Emailform value={email} onChange={(e) => setEmail(e.target.value)}/>
            <Form label="Date of Birth" type="date" />
            <Passform value={password} onChange={(e) => setPassword(e.target.value)}/>
            <ConfirmPass />
            <div className={style.button}>
              <input 
                type="submit" 
                value="Sign Up"
                onClick={registerWithEmailAndPassword} />
            </div>
            <div className={style.text}>
              have an&nbsp;
              <AuthType goToMenu="main"> account</AuthType>
            </div>
          </div>
        </div>
      </CSSTransition>
    );
  }
}
let useClickOutside = (handler) => {
  let domNode = useRef();

  useEffect(() => {
    let clickListener = (event) => {
      if (domNode.current && !domNode.current.contains(event.target)) {
        handler();
      }
    };

    document.addEventListener("mousedown", clickListener);

    return () => {
      document.removeEventListener("mousedown", clickListener);
    };
  });
  return domNode;
};

function Form(props) {
  return (
    <div className={style.formBox}>
      <label className={style.label}>{props.label}:</label>

      <form className={style.input}>
        <input 
          type={props.input} 
          name={props.input} 
          required="true" />
      </form>
    </div>
  );
}

export default Auth;

Answer 1

 return (
    <div className={style.container}>
      <Login />
      <Signup />
    </div>
    );

In the above code, add the whole content of Login and Signup inside return rather than creating different components(functions) because every time the internal state updates the component is re-rendered causing the focus to be removed. It happens so fast that it seems like only the focus is disabling but the component re-renders each time.

Solution:

    return (
    <div className={style.container}>
      <CSSTransition in={activeMenu === "main"} unmountOnExit timeout={500}>
        <div ref={domNode}>
          <div className={style.login}>
            <h1 className={style.title}>Clip It</h1>
            {/* Email and Password */}
            <Emailform/>
            <Passform/>

            <div className={style.button}>
              <input 
                type="submit" 
                value="Login"
                onClick={() => signInWithEmailAndPassword(email, password)} />
              <input 
                type="submit" 
                value="Login with Google"
                onClick={signInWithGoogle} />
            </div>
            <div className={style.text}>
              <p className={style.plink}>Forgot Password</p>
              <div>
                Need an account?&nbsp;
                <AuthType goToMenu="Signup">click here</AuthType>
              </div>
            </div>
          </div>
        </div>
      </CSSTransition>
      

      <CSSTransition in={activeMenu === "Signup"} unmountOnExit timeout={500}>
        <div ref={domNode}>
          <div className={style.signUp}>
            <div className={style.title}> Clip It</div>
            <Form label="First Name" type="text" />
            <Form label="Last Name" type="Text" />
            <Emailform value={email} onChange={(e) => setEmail(e.target.value)}/>
            <Form label="Date of Birth" type="date" />
            <Passform value={password} onChange={(e) => setPassword(e.target.value)}/>
            <ConfirmPass />
            <div className={style.button}>
              <input 
                type="submit" 
                value="Sign Up"
                onClick={registerWithEmailAndPassword} />
            </div>
            <div className={style.text}>
              have an&nbsp;
              <AuthType goToMenu="main"> account</AuthType>
            </div>
          </div>
        </div>
      </CSSTransition>
    </div>
  );