Uncaught ReferenceError: can't access lexical declaration 'useRef' before initialization Using React

Question

Can someone explain to me why the weird error message occurs again and again? I'm implementing react authentication for the signup page. By using the useRef hook the unwanted error occurs so many times. I try a lot but failed to find a generalized solution.

import React, { useEffect, useState } from "react";
import {
  faTimes,
  faCheck,
  faInfoCircle,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

const USER_REGEX = /^[a-z][a-zA-Z0-9-_]{3,23}$/;
const PWD_REGEX = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%]).{8,24}$/;


function LoginForm() {

  **const useRef = useRef();
  const errRef = useRef();**

  const [user, setUser] = useState("");
  const [validName, setValidName] = useState(false);
  const [userFocused, setUserFocused] = useState(false);

  const [pwd, setPwd] = useState("");
  const [validPwd, setValidPwd] = useState(false);
  const [pwdFocused, setPwdFocused] = useState(false);

  const [matchPwd, setMatchPwd] = useState("");
  const [validMatch, setValidMatch] = useState(false);
  const [matchFocused, setMatchFocused] = useState(false);

  const [errMsg, setErrMsg] = useState("");
  const [success, setSuccess] = useState(false);

  useEffect(() => {
    useRef.current.focus();
  }, []);

  useEffect(() => {
    
    const result = USER_REGEX.text(user);
    console.log(result);
    console.log(user);
    setValidName(result);
  }, [user]);

  useEffect(() => {
    const result = PWD_REGEX.text(pwd);
    console.log(result);
    console.log(pwd);
    setValidPwd(result);

    const match = pwd === matchPwd;
    setValidMatch(match);
  }, [pwd, matchPwd]);

  useEffect(() => {
  
  const  match  = pwd ? setErrMsg("Password Match") : setErrMsg("Password Not Match");

    // setErrMsg('');
  }, [user, pwd, matchPwd]);

  return (
    <section>
      <p
        ref={errRef}
        className={errMsg ? "errMsg" : "off Screen"}
        aria-live="assertive"
      >
        {errMsg}
      </p>

      <h1> Login Registration Form</h1>
      <form>
        <label htmlFor="userName"> User Name </label>
        <input
          type="text"
          id="userName"
          autoComplete="off"
          onChange={(e) => setUser(e.target.value)}
          onFocus={() => setUserFocused(true)}
          onBlur={() => setUserFocused(false)}
          aria-invalid = {validName ? "false" : "true"}
          aria-describedby = 'uidnote'

        />

        <p id="uidnote" className={userFocused && user && !validName ? "Instruction" : "offScreen"}>
          <FontAwesomeIcon icon={faInfoCircle} />
          4 to 24 Character
          <br />
          Must beign with a Letter <br/>


        </p>
      </form>
    </section>
  );
}

export default LoginForm;

I'm practicing react auth using Axios. But got this error. Could someone help how to fix the issue?