places.map is not a function in List.jsx

[mahsanr44]

I'm trying to get places and passing in my List component but getting this error:

My App code is:

import Header from "./components/Header/Header";
import Map from "./components/Map/Map";
import List from "./components/List/List";
import { getPlacesData } from "./api";

const App = () => {
  const [places, setPlaces] = useState([]);
  const [coordinates, setCoordinates] = useState({});
  const [bounds, setBounds] = useState(null);

  useEffect(() => {
    navigator.geolocation.getCurrentPosition((data) => {
      const {
        coords: { latitude, longitude },
      } = data;
      setCoordinates({ lat: latitude, lng: longitude });
    });
  }, []);

  useEffect(() => {
    const fetchData = () => {
      const data = getPlacesData(bounds?.sw, bounds?.ne);
      setPlaces(data);
    };
    fetchData();
  }, [coordinates, bounds]);

  return (
    <div>
      <Header />
      <div className="flex">
        <List 
        places={places}
        />

        <Map
          setCoordinates={setCoordinates}
          setBounds={setBounds}
          coordinates={coordinates}
        />
      </div>
    </div>
  );
};

export default App;

My List Code is :

 import React, { useState } from "react";
import PlaceDeatils from "../PlaceDeatils/PlaceDeatils";

const List = ({places}) => {
  const { type, setType } = useState("restaurants");
  const { rating, setRating } = useState("");
  return (
    <div>
      <h1 className="font-bold text-xl p-2">
        Restaurents, Hotels and Attractions Around You!
      </h1>
      <div className="flex space-x-5 p-2">
        <div>
          <label for="underline_select" className="sr-only">
            Underline select
          </label>
          <select
            id="underline_select"
            className=" py-2.5 px-0  w-full text-sm  bg-transparent border-0 border-b-[1.5px] border-gray-200 appearance-none  dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer"
          >
            <option
              selected
              value={type}
              onChange={(e) => setType(e.target.value)}
            >
              Type
            </option>
            <option value="restaurants">Restaurants</option>
            <option value="hotels">Hotels</option>
            <option value="attractions">Attractions</option>
          </select>
        </div>
        <div>
          <label for="underline_select" className="sr-only">
            Underline select
          </label>
          <select
            id="underline_select"
            className="block py-2.5 px-0 w-full text-sm  bg-transparent border-0 border-b-[1.5px] border-gray-200 appearance-none  dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer"
          >
            <option
              selected
              value={rating}
              onChange={(e) => setRating(e.target.value)}
            >
              Ratings
            </option>
            <option value={0}>All</option>
            <option value={3}>Above 3.0</option>
            <option value={4}>Above 4.0</option>
            <option value={4.5}>Above 4.5</option>
          </select>
        </div>
      </div>
      <div>
        {
            places?.map((place,i)=>(       
- // getting error here
                <>
                    <div key={i} className="bg-blue-200">
                        <PlaceDeatils place={place}/>
                    </div>
                </>

                )
            )
        }
      </div>
    </div>
  );
};

export default List;

but I'm getting the above-attached error in the list component. PS: I'm using Tailwind CSS instead of MUI.

Anyone who can help me out?