使用定制钩子处理React单选按钮构建在useState钩子上？

Question

我正在使用自定义钩子注册表单，尽管输入下拉菜单似乎都正常，但单选按钮似乎不正常。单选按钮返回的值始终为 on ，而不是必须为 male ||的值。女性。 提交表单后，甚至UI上的状态也不会清除

    import { useState } from "react";

    export const useForm = (initialValues) => {
    const [values, setValues] = useState(initialValues);

   function clearState() {
            setValues(initialValues);
         }

    return [
    values,
    (e) => {
      setValues({
        ...values,
        [e.target.name]: e.target.value,
      });
    },
    clearState,
  ];
};

**INITIAL STATE**  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<


const [values, handleValues, clearState] = useForm({
     name:"",
    email:"",
    .........
    gender: "",<<<<< THIS STATE IS NOT UPDATING
  })


FORM SUBMIT <<<<<<<< Function for submitting the form

 const handleSignUp = (e) => {
    e.preventDefault();
    console.log(values);
clearState()
  };


**RADIO BUTTON JSX WITH CUSTOM INPUT FIELD**


 <div className="Gender-Content">
            <label htmlFor="female" className="Value-Container">
              Female
              <FormInput
                className="Gender-Radio"
                value={values.gender}
                type="radio"
                // radioCheck="gender"
                name="gender"
                onChange={handleValues}
              />
            </label>
          </div>
          <div className="Gender-Content">
            <label htmlFor="male" className="Value-Container">
              Male
              <FormInput
                className="Gender-Radio"
                value={values.gender}
                type="radio"
                // radioCheck="gender"
                name="gender"
                onChange={handleValues}
              />
            </label>
          </div>
 

**CONSOLE LOG OUTPUT** <<<<<<<<<<<<<<<<<<

{
....
gender: "on" <<<<<<< CONSOLE LOG OUTPUT
lastName: ""
...
}