i am getting error after i selecting the date from @material-ui/pickers in React.js

Question

I have a form in this i create date picker field, i set by default as using new Date() its working fine. But when i select any date i am getting this error.

when i am using {TextField} component then it works fine but i can't set default value as a current date thats why i use {KeyboardDatePicker}.

**this is my console:-

check this image

This my form:-

import { Route, Routes, useNavigate } from "react-router-dom";
import axios from "axios";
import { KeyboardDatePicker} from '@material-ui/pickers';

export default function DonorForm ({showForm})  {

   const current = new Date();
  const dateNew = `${current.getMonth()+1}/${current.getDate()}/${current.getFullYear()}`
  // console.log(dateNew,"<<<---checking new Date")

  const [donors, setDonors] = useState({
    donateDate:dateNew
  });

  let name, value;
  const handleInputs = (e) => {
    name = e.target.name;
    value = e.target.value;
    setDonors({...donors, [name]: value });
  };
  const onclick = async (e) => {
    const {donateDate } =
    donors;

    try {
        const config = {
          header: {
            "Content type": "appication/json",
          },
        };
        const { data } = await axios.post(
          "http://localhost:4000/donorsform",
          {donateDate},
          config
        );
        console.log(data);
        localStorage.setItem("donorsInfo", JSON.stringify(data));
        navigate("/coordinators/myprojects");
        
    } catch (error) {
      setError(true);
    }
  };

  return(
    <>
                  <div className="card-header ">
                    <h3 className="card-title my-1">Donor Details</h3>
                  </div>
                  <form 
                    onSubmit={handleSubmit(onclick)}
                    method="POST"
                    className="form-horizontal "
                    id="register-form"
                  >
                    <div className="card-body">
                     
                      <div className="row">
                      <div className="form-group">
                          <label className="form-label col">Date</label>
                          <div>
                            <KeyboardDatePicker
                             autoOk
                             variant="inline"
                             inputVariant="outlined"
                           name="donateDate"
                             format="DD/MM/YYYY"
                             value={donors.donateDate}
                             InputAdornmentProps={{ position: "start" }}
                             onChange={handleInputs}
                            />
                            
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="card-footer">
                      <button type="submit" className="btn-hover-1 color-3">
                        Submit
                      </button>
                    </div>
                  </form>
    </>
  );
};
 

How can i solve this problem Plzz help me. Thank you!!!

Answer 1

According with the documentation, the onChange of the KeyboardDatePicker doesn't receive and event, it receives a Date, so maybe you should separate the implementation for managing this specific input:

<KeyboardDatePicker ...
                    onChange={handleDateChange} />

const handleDateChange = (date) => {
    setDonors({...donors, donateDate: date }); ...