I have a React frontendand I have styled it using Material UI design.I added the Date and Time component styling to my form and now the form is not able to take up the "name" value and further process with the posting.The prob is only happening in the Date and time input feilds here is the error "TypeError: Cannot read properties of undefined (reading 'name')".... Pls check out my code thanks.

function ReservationForm(){
    const navigate = useNavigate();
    const params = useParams();
    const {user}=useContext(Cont)


    
    const[reservationData,setReservationData]=useState({
        name:"",
        date:"",
        time:"",
        num:"",
        contact:"",
        occasion:"",
    });
    function handleReservationChange(event){
        setReservationData({
            ...reservationData,
            [event.target.name]: event.target.value,
        })
    }
    
    function handleReservationSubmit(event){
        event.preventDefault();
        const newReservation={
            ...reservationData,
            restaurant_id: params.id,
            user_id: user.id,
        };

        fetch(`/reservations`, {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(newReservation),
          })
            .then((r) => r.json())
            .then(
                setReservationData({
                name:"",
                date:"",
                time:"",
                num:"",
                contact:"",
                occasion:"",
              })
            );
          navigate("/myreservations");
        }

    
    return(
        <>
          <Box
        component="form"
        sx={{
          "& > :not(style)": { m: 1 },
        }}
        noValidate
        autoComplete="off"
        onSubmit={handleReservationSubmit}
      >
       <h1 className="editheadings">Reserve