Probleme with Reach-hook-form validation on update

I Working with hook-form and MaterialUI, I want to make the validation of the form, the validation working well in adding, but on update (input are ready full) in shows me erros (inputs are empty):

my code:

import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Grid from "@mui/material/Grid";
import TextField from "@mui/material/TextField";
import axios from "axios";
import "bootstrap/dist/css/bootstrap.min.css";
import React from "react";
import { useForm } from "react-hook-form";
import { useNavigate, useParams } from "react-router-dom";

function UpdateEmployer(props) {
  const { id } = useParams();

  const { register, handleSubmit, formState, control } = useForm({
    mode: "onChange",
  });

  // declare states
  const [FullName, setFullName] = React.useState("");
  const [cin, setCin] = React.useState("");
  const [profile, setProfile] = React.useState("");
  const [years, setYears] = React.useState("");

  const { isSubmitting, errors, isValid } = formState;
  const navigate = useNavigate();

  // get data from form and post to api
  const onSubmit = async (data) => {
    // set state from data
    const { FullName, cin, profile, years } = data;

    console.log(data);
    await axios.put(`http://localhost:5000/employers/${id}`, {
      fullname: FullName,
      cin: cin,
      profile: profile,
      experience: years,
    });

    navigate("/");
  };

  React.useEffect(() => {
    axios.get(`http://localhost:5000/employers/${id}`).then((res) => {
      setFullName(res.data.fullname);
      setCin(res.data.cin);
      setProfile(res.data.profile);
      setYears(res.data.experience);
    });
  }, []);

  // -------------------- render componenet --------------------
  return (
    <div className="container mt-4">
      <div className="text-center my-3 font-weight-bold">Update Employer</div>

      <form onSubmit={handleSubmit(onSubmit)} style={{ width: "100%" }}>
        <Grid container spacing={2}>
          <Grid item xs={8}>
            <TextField
              id="FullName"
              name="FullName"
              label="Full Name"
              variant="outlined"
              fullWidth
              value={FullName}
              {...register("FullName", { required: "Please Entre your name" })}
              onChange={(e) => setFullName(e.target.value)}
            />
            <span className="text-danger">
              {errors.FullName && errors.FullName.message}
            </span>
          </Grid>

          <Grid item xs={4}>
            <TextField
              id="cin"
              name="cin"
              label="CIN"
              variant="outlined"
              value={cin}
              fullWidth
              {...register(
                "cin",
                { required: "Please Entre your cin" },
                {
                  minLength: {
                    value: 6,
                    message: "Oops! the cin have to ve at least 6 characters",
                  },
                }
              )}
              onChange={(e) => {
                console.log(e.target.value);
                setCin(e.target.value);
              }}
            />
            <span className="text-danger">
              {errors.cin && errors.cin.message}
            </span>
          </Grid>

          <Grid item xs={8}>
            <TextField
              id="profile"
              name="profile"
              label="Profile"
              variant="outlined"
              fullWidth
              value={profile}
              {...register("profile", {
                required: "Please Entre your profile",
              })}
              onChange={(e) => setProfile(e.target.value)}
            />
          </Grid>
          <Grid item xs={4}>
            <TextField
              id="years"
              name="years"
              label="Years of Experience"
              variant="outlined"
              value={years}
              fullWidth
              {...register("years", { required: "Please Entre your years" })}
              onChange={(e) => setYears(e.target.value)}
            />
          </Grid>

          <Grid item xs={12}>
            <Box textAlign="center">
              <Button
                id="Update_employer"
                variant="contained"
                color="primary"
                type="submit"
                // disabled={!isValid}
              >
                Update Employee
              </Button>
            </Box>
          </Grid>
        </Grid>
      </form>
    </div>
  );
}

export default UpdateEmployer;

The fill he inputs in with useEffect() and it shows me that the input are full with the right information but when I want to submit it shows me that error that the input are empty.