Invalid attempt to destructuring non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method

Question

I am building a react native application to display nearby hospitals. The error is at AppMapView & ListView component

const [placeList, setPlaceList] = useState([]);

ere, placeList is not empty. console.log does give the data.

const [placeList, setPlaceList] = useState([])

I tried to replace the initial state with {}, [], & even [{}} but nothing seems to work.

I have handled the cases where initially placeList might be empty and check it, before mapping over it.

export default function HomeScreen() {
  const { location, setLocation } = useContext(UserLocationContext);
  const [selectedMarker, setSelectedMarker] = useState([]);
  const [placeList, setPlaceList] = useState([]);

  useEffect(() => {
    location && getNearByPlace();
  }, [location]);

  const getNearByPlace = () => {
    const data = {
      includedTypes: ["hospital"],
      maxResultCount: 10,
      locationRestriction: {
        circle: {
          center: {
            latitude: location?.latitude,
            longitude: location?.longitude,
          },
          radius: 5000.0,
        },
      },
    };

    GlobalApi.NewNearByPlace(data).then((response) => {
      console.log(response.data);
      setPlaceList(response.data?.places);
    });
  };
  return (
    <>
      <SelectMarkerContext.Provider
        value={{ selectedMarker, setSelectedMarker }}
      >
        <View style={styles.container}>
          <View style={styles.header}>
            <Header
              searchedLocation={(location) =>
                setLocation({
                  latitude: location.lat,
                  longitude: location.lng,
                })
              }
            />
          </View>
          {placeList && <AppMapView placeList={placeList} />}
          <View style={styles.listContainer}>
            {placeList && <ListView placeList={placeList} />}
          </View>
        </View>
      </SelectMarkerContext.Provider>
    </>
  );
}


export default function AppMapView({ placeList }) {
  const { location, setLocation } = useContext(UserLocationContext);

  return (
    location?.latitude && (
      <View style={styles.container}>
        <MapView
          style={{ width: 900, height: 1000 }}
          region={{
            latitude: location?.latitude,
            longitude: location?.longitude,
            latitudeDelta: 0.0422,
            longitudeDelta: 0.0421,
          }}
        >
          {location ? (
            <Marker
              coordinate={{
                latitude: location?.latitude,
                longitude: location?.longitude,
              }}
              title="Marker Title"
              description="Marker Description"
            ></Marker>
          ) : null}

          <FlatList
            data={placeList}
            renderItem={({ item }) => <Markers place={item} />}
            keyExtractor={(item, index) => index.toString()}
          />
        </MapView>
      </View>
    )
  );
}


export default function ListView({ placeList }) {
   const flatListRef = useRef(null);
   const [selectedMarker, setSelectedMarker] = useContext(SelectMarkerContext);


return (
    <View>
      <FlatList
        data={placeList}
        ref={flatListRef}
        getItemLayout={getItemLayout}
        pagingEnabled
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        renderItem={({ item, index }) => (
          <View key={index}>
            <PlaceItem place={item} />
          </View>
        )}
      />
    </View>
  );
}