Using UseRef hook for form data

export default function Form() {  const [email, setEmail] = React.useState("");  const [password, setPassword] = React.useState("");  const submit = (e) => {    e.preventDefault();    console.log(email, password);  };  // rerenders component eveytime when a character is added in the input field  React.useEffect(() => {    console.log("value changed");  }, [email, password]);  return (    <form onSubmit={submit}>      <label htmlFor="email">Email</label>      <input        type="email"        name="email"        value={email}        onChange={(e) => setEmail(e.target.value)}      />      <label htmlFor="password">Password</label>      <input        type="password"        name="password"        value={password}        onChange={(e) => setPassword(e.target.value)}      />      <button type="submit">Submit</button>    </form>  );}

export default function Ref() {  const emailRef = React.useRef(null);  const passwordRef = React.useRef(null);  const submit = (e) => {    e.preventDefault();    console.log(emailRef.current.value, passwordRef.current.value);  };  return (    <form onSubmit={submit}>      <label htmlFor="email">Email</label>      <input ref={emailRef} type="email" name="email" />      <label htmlFor="password">Password</label>      <input ref={passwordRef} type="password" name="password" />      <button type="submit">Submit</button>    </form>  );}