I want to update the gender_interest value in my database. When I hit submit it reloads and returns a status 200 but the value in my database remains the same. I’m not sure if I’m missing something from const handleSubmit or event handling or if I need to add a use useEffect hook.

const [formData, setFormData] = useState({
     
      gender_interest: ""
    })

    let navigate = useNavigate()

    const handleSubmit = async (e) => {
      console.log("submitted")
      try {
        const response = await axios.put(
          "http://localhost:4000/search",
          { formData }
        );
        console.log(response);
        const success = response.status === 200
        if (success) navigate("/dashboard")
      } catch (err) {
        console.log(err)
      }
    };


  const handleClick = () => {
    setShowModal(false)
  };

   const handleChange = (e) => {
     console.log("e", e);
     const value =
       e.target.type === "checkbox" ? e.target.checked : e.target.value;
     const name = e.target.name;

     setFormData((prevState) => ({
       ...prevState,
       [name]: value,
     }));
   };

  return (
    <div className="search-modal">
      <div className="close-icon" onClick={handleClick}>
        ⓧ
      </div>

      <form onSubmit={handleSubmit}>
        <section>
         

          <div className="multiple-gender-input-container">
            <input
              id="man-gender-interest"
              type="radio"
              name="gender_interest"
              value="man"
              onChange={handleChange}
              checked={formData.gender_interest === "man"}
            />
            <label htmlFor="man-gender-interest">Man</label>
            <input
              id="woman-gender-interest"
              type="radio"
              name="gender_interest"
              value="woman"
              onChange={handleChange}
              checked={formData.gender_interest === "woman"}
            />