Why is a problem with POST request happening here?

I'm facing a very weird error. When I make a post request I cannot see my card rendered directly on the page I have to refresh the page for it to get viewed. Please take a look at my code.The code for the. context is written as well

Res is basically the object like the details in the reservation card.

import { createContext } from "react";
import { useState } from "react";

 export  const Cont =createContext();


function ContProvider({children}){
   const [user, setUser] = useState(null);
   const[reviews,setReviews]=useState([]);
   const[reservations,setReservations]=useState([]);
   const [showLogin, setShowLogin] = useState(true);
   const [errors, setErrors] = useState([]);

   return <Cont.Provider value={{user,setUser,reviews,setReviews,reservations,setReservations,showLogin,setShowLogin,errors,setErrors}}>

      {children}
   </Cont.Provider>
}

export default ContProvider;

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

  const [reservationData, setReservationData] = useState({
    name: "",
    date: "",
    time: "",
    num: "",
    contact: "",
    occasion: "",
  });
  function handleReservationChange(event) {
    setReservationData({
      ...reservationData,
      [event.target.name]: event.target.value,
    });
  }
  function handleReservationChangeWithNameAndValue(name, newValue) {
    setReservationData({
      ...reservationData,
      [name]: newValue,
    });
  }
  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(

       function (res){
        setReservationData({
          name: "",
          date: "",
          time: "",
          num: "",
          contact: "",
          occasion: "",
        })
        setReservations([...reservations,res])
       }
       
      );
    navigate("/myreservations");
  }