인풋 onChange 한글 입력 오류

인풋에 내용을 입력할때

first name 칸에 이름을 입력하면 
예 )  길동 입력
ㄱ기길ㄷ도동 이렇게 입력이 됩니다
last name 도 마찬가지구...

혹시나해서 onChange를 때고 입력했더니 오류는 안나는데

first name에 내용을 입력한 후

last name으로 마우스를 클릭하면

first name에 적었던 정보가 빈칸이 되버립니다...

어쩌면 좋죠...? (유트브 강의인데.. 외국인이다보니까 한글 관련 문제가 빈번히 발생하는거 같아요..)

참고 코드입니다

  const handleRegisterChange = (e) => {
    const { name, value } = e.target;
    setUser({ ...user, [name]: value });
  };

<div className="reg_line">
                <RegisterInput
                  type="text"
                  placeholder="First name"
                  name="first_name"
                  onChange={handleRegisterChange}
                />
                <RegisterInput
                  type="text"
                  placeholder="Surname"
                  name="last_name"
                  onChange={handleRegisterChange}
                />

  const registerValidation = Yup.object({
    first_name: Yup.string()
      .required("What's your First name ?")
      .min(1, "Fisrt name must be between 1 and 16 characters.")
      .max(16, "Fisrt name must be between 2 and 16 characters.")
      .matches(/^[a-zA-Z가-힣]+$/, "Numbers and special characters are not allowed."),
    last_name: Yup.string()
      .required("What's your Last name ?")
      .min(1, "Last name must be between 1 and 16 characters.")
      .max(16, "Last name must be between 2 and 16 characters.")
      .matches(/^[a-zA-Z가-힣]+$/, "Numbers and special characters are not allowed."),
    email: Yup.string()
      .required(
        "You'll need this when you log in and if you ever need to reset your password."
      )
      .email("Enter a valid email address."),
    password: Yup.string()
      .required(
        "Enter a combination of at least six numbers,letters and punctuation marks(such as ! and &)."
      )
      .min(6, "Password must be atleast 6 characters.")
      .max(36, "Password can't be more than 36 characters"),
  });