Why am I getting TypeError: reservations.map is not a function?

This is very weird "Uncaught TypeError: reservations.map is not a function" when I console.logged reservations .The further error states MyReservations.js:45 Uncaught (in promise) TypeError: reservations.map is not a function . index.js:1 The above error occurred in the component:it does give an array How to solve this?? MyReservations.js

import {useEffect, useState } from "react";
import ReservationCard from "./ReservationCard";


function MyReservations({user,reservations,setReservations}){
  

  useEffect(()=>{
    fetch("/reservations")
    .then(res=>res.json())
    .then(reservationData=>{
      setReservations(reservationData)
    })
  
   },[])
  
      function handleUpdateReservation(updatedReservation) {
        const updatedReservations = reservations.map((reservation) => {
          if (reservation.id === updatedReservation.id) {
            return updatedReservation;
          } else {
            return reservation;
          }
        });
        setReservations(updatedReservation);
      }
    

      function handleCancel(reservationtodelete){
        const newReservations=reservations.filter(r=>r.id !== reservationtodelete)
         setReservations(newReservations)
         
       }

const renderReservations=reservations.map((reservation)=>(
  <ReservationCard key={reservation.id} reservation={reservation} handleCancel={handleCancel}  onUpdateReservation={handleUpdateReservation}  />
  ))
  
    return(
        <> 
        {renderReservations}
        </>
    )
}
export default MyReservations;

App.js

import './App.css';

import { useEffect,useState } from 'react';
import About from './components/About'
import Navbar from './components/Navbar';
import Restaurants from './components/Restaurants';
import Loggin from './components/Loggin';
import RestaurantInfo from './components/RestaurantInfo';
import MyReservations from './components/MyReservations';
import { Route,Routes } from 'react-router-dom';
import Blogs from './components/Blogs';
import {Cont} from './components/Cont'

function App() {
  const [user, setUser] = useState(null);
  const[reservations,setReservations]=useState([]);
  const[reviews,setReviews]=useState([]);
  const[current,setCurrent]=useState({});
  useEffect(() => {
    document.title = "Nyc";
  }, []);

  useEffect(() => {
    // auto-login
    fetch("/me", { credentials: "same-origin" }).then((r) => {
      if (r.ok) {
        r.json().then((user) => setUser(user));
      }
    });
  }, [setUser]);
  function handleAddReviews(newReview) {
    setReviews([...reviews, newReview]);
  }

  
  if (!user) return <Loggin error={'please login'} onLogin={setUser} />;
  return (
    <Cont.Provider value={ {current,setCurrent}}>
    <div className="App">
   <Navbar user={user} setUser={setUser} />
   <Routes>
    <Route exact path="/blogs" element={<Blogs />} />
    
    <Route exact path="/myreservations" element={<MyReservations user={user}  reservations={reservations} setReservations={setReservations}/>} />

    <Route exact path="/restaurants/:id" element= {<RestaurantInfo handleAddReviews={handleAddReviews} user={user} reviews={reviews} setReviews={setReviews}/>}  />

    <Route exact path="/restaurants" element={<Restaurants />} />

     <Route exact path="/about" element={<About user={user} />} />

   </Routes>
   
   
    </div>
    </Cont.Provider>
  );
}

export default App;