Data from the backend not shown in frontend

[Razvan123]

I am getting data from the backend and want to show it in the frontend. The response and request are all good but it does not show in the frontend.
Here is my component.

const Discover = () => {
  const navigation = useNavigation();

  const [type, setType] = useState();
  const [isLoading, setIsLoading] = useState(false);
  const [mainData, setMainData] = useState([]);
  const [coordinates, setCoordinates] = useState(null);
  const BackendUrl = "http://10.0.2.2:8000";
  const [placesData, setPlacesData] = useState([]);

  const getPlaces = async () => {
    try {
      if (coordinates && type) {
        const { latitude, longitude } = coordinates;
        const url = `${BackendUrl}/?type=${type}&latitude=${latitude}&longitude=${longitude}&lang=${"eu"}`;
        const response = await fetch(url);
        let { data } = await response.json();
        if (response.ok) {
          const ids = data.map((item) => item.location_id);
          data = data.filter(
            ({ location_id }, index) => !ids.includes(location_id, index + 1)
          );
          console.log("aa", data);
          return data; // Return the data
        } else {
          console.error(data);
        }
      }
    } catch (error) {
      console.error(error);
    }
  };

  useLayoutEffect(() => {
    navigation.setOptions({
      headerShown: false,
    });
  }, []);

  const fetchData = async () => {
    const data = await getPlaces();
    setPlacesData(data); // Set placesData with the received data
    setMainData(data);
  };

  useEffect(() => {
    fetchData();
  }, [coordinates, type]);

  console.log("ss", placesData);

  return (
    <SafeAreaView className="flex-1 bg-white relative">
      <View className="flex-row flex-2 items-center justify-between mt-8">
        <View className="flex-1 flex-row items-center">
          <Image
            source={Venice}
            className="w-full h-[200px] rounded-br-[65px]"
          />
        </View>
      </View>

      <View className="flex-row items-center bg-white mx-4 rounded-xl py-1 px-4 shadow-lg mt-4">
        <GooglePlacesAutocomplete
          GooglePlacesDetailsQuery={{ fields: "geometry" }}
          placeholder="Search destination..."
          fetchDetails={true}
          onPress={(data, details = null) => {
            const { lat, lng } = details?.geometry?.location;
            console.log("Latitude:", lat);
            console.log("Longitude:", lng);
            setCoordinates({ latitude: lat, longitude: lng });
          }}
          query={{
            key: "AIzaSyDO5_8WqGXCoStWwkqv8JGlZuQRDIfL1h8",
            language: "en",
          }}
        />
      </View>
      <ScrollView>
        <View className="flex-row items-center justify-between px-3 mt-8">
          <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
            <MenuContainer
              key={"hotels"}
              title="Hotels"
              imageSrc={Hotels}
              selected={type === "hotels"}
              setType={() => setType("hotels")} // Update the type directly
            />
            <MenuContainer
              key={"attractions"}
              title="Attractions"
              imageSrc={Attractions}
              selected={type === "attractions"}
              setType={() => setType("attractions")} // Update the type directly
            />
            <MenuContainer
              key={"restaurants"}
              title="Restaurants"
              imageSrc={Restaurant}
              selected={type === "restaurants"}
              setType={() => setType("restaurants")} // Update the type directly
            />
            <MenuContainer
              key={"beach"}
              title="Beach"
              imageSrc={Beach}
              type={type}
              setType={setType}
            />
            <MenuContainer
              key={"food"}
              title="food"
              imageSrc={Restaurants}
              type={type}
              setType={setType}
            />
          </ScrollView>
        </View>
      </ScrollView>
      <View className="flex-wrap px-4 mt-2">
        {placesData && placesData.length > 0 ? (
          <ScrollView showsHorizontalScrollIndicator={false}>
            {placesData.map((item) => (
              <ItemCardContainer
                key={item.location_id}
                imageSrc={
                  item?.photo?.images?.medium?.url ||
                  "https://cdn.pixabay.com/photo/2015/10/30/12/22/eat-1014025_1280.jpg"
                }
                title={item?.name}
                location={item?.location_string}
                data={item}
              />
            ))}
          </ScrollView>
        ) : (
          <View className="w-full h-[200px] items-center space-y-8 justify-center">
            <Image source={NotFound} className="w-10 h-10 object-cover" />
            <Text className="text-2xl text-[#428288] font-semibold">
              Oops... No Data Found
            </Text>
          </View>
        )}
      </View>
    </SafeAreaView>
  );
};

export default Discover;

I can provide further code and backend response.