Проблема с получением вношения и получения информации в контекст и с контекста для компонента

Я получаю информацию з бекенда виде json:

[
    {
        "id": 2,
        "name": "Lviv",
        "description": "Lviv is a capital of Great Britain",
        "images": [],
        "location": {
            "id": 1,
            "street": "Чорновола",
            "city": "Львів",
            "region": "Львівська область",
            "postalcode": "79007"
        },
        "relaxation_type": "Молодіжний",
        "trip_goal": "Насолодидись природою",
        "with_food": true,
        "with_sleep": true
    }
]

проблема в том, что если мест будет много мне надо как то заполнять контекст всеми местами, и делать 1 новый компонент для каждого места

Файл контекста:

import React, { createContext, useState, useContext } from 'react';

export const PlaceContext = createContext(); // Експортуйте UserContext


export const PlaceProvider = ({ children }) => {

    const [PlaceId, setPlaceId] = useState(null);
    const [PlaceName, setPlaceName] = useState("");
    const [PlaceDesc, setPlaceDesc] = useState("");
    const [PlaceLocation, setPlaceLocation] = useState({
        city: "",
        id: null,
        postalcode: "",
        region: "",
        street: ""
    });
    const [PlaceRelaxationType, setPlaceRelaxationType] = useState("");
    const [PlaceGoal, setPlaceGoal] = useState("");
    const [PlaceWithFood, setPlaceWithFood] = useState(false);
    const [PlaceWithSleep, setPlaceWithSleep] = useState(false);
    const [PlaceImages, setPlaceImages] = useState([]);

    return (
        <PlaceContext.Provider value={{ PlaceId, PlaceName, PlaceDesc, PlaceLocation, PlaceRelaxationType, PlaceGoal, PlaceWithFood, PlaceWithSleep, PlaceImages,setPlaceId,  setPlaceName, setPlaceDesc, setPlaceRelaxationType, setPlaceGoal, setPlaceWithFood, setPlaceWithSleep, setPlaceImages, setPlaceLocation}}>
            {children}
        </PlaceContext.Provider>
    );
};

export const usePlace = () => useContext(PlaceContext);

Файл компонента, в котором делается запрос:

import React, { useEffect, useContext } from 'react';
import { PlaceContext } from '../PlaceContext';
import FindComponentItem from "./FindComponentItem";

const CenterPart = () => {
    const { setPlaceId, setPlaceName, setPlaceDesc, setPlaceImages,
        setPlaceLocation, setPlaceRelaxationType, setPlaceGoal,
        setPlaceWithFood, setPlaceWithSleep } = useContext(PlaceContext);

    const fetchPlaceData = async () => {
        try {
            let response = await fetch('http://127.0.0.1:8000/places/', {
                method: 'GET',
                headers: {
                    "Content-Type": "application/json"
                }
            });
            if (response.ok) {
                let placesData = await response.json();
                console.log(placesData); // виводимо інформацію про місце в консоль
                console.log("Succesfully fetched"); // даємо в консолі відповідь про успішне завантаження даних
                // Оновлення стану компонента з отриманими даними про місце
                placesData.forEach(placeData=>{
                    setPlaceId(placeData.id);
                    setPlaceName(placeData.name);
                    setPlaceDesc(placeData.description);
                    setPlaceImages(placeData.images);
                    setPlaceLocation(placeData.location);
                    setPlaceRelaxationType(placeData.relaxation_type);
                    setPlaceGoal(placeData.trip_goal);
                    setPlaceWithFood(placeData.with_food);
                    setPlaceWithSleep(placeData.with_sleep);
                })
            } else {
                console.log("Fetching data failed!");
            }
        } catch (error) {
            console.error('Error fetching place data:', error);
        }
    };


    useEffect(() => {
        fetchPlaceData();
    }, []);

    const { places } = useContext(PlaceContext);

    return (
        <div>
            {places.map(place => (
                <FindComponentItem
                    key={place.PlaceId}
                    PlaceId={place.PlaceId}
                    PlaceName={place.PlaceName}
                    PlaceDesc={place.PlaceDesc}
                    PlaceLocation={place.PlaceLocation}
                    PlaceImages={place.PlaceImages}
                />
            ))}
        </div>
    );
}

export default CenterPart;

            
            
            
            

        

/// компонент, которий создается после запроса(их должно бить много в соответствии с числом мест), в json одно, но я потом добавлю

            import React, { Component } from 'react';
            import { NavLink } from 'react-router-dom';
            import './FindComponentItem.css';
            import ReadMoreComponent from "./ReadMoreComponent";
            import { PlaceContext } from "../PlaceContext";

            class FindComponentItem extends Component {
                static contextType = PlaceContext;

                render() {
                    const { PlaceName, PlaceId, PlaceImages, PlaceLocation } = this.context;
                    const { city } = PlaceLocation;
                    console.log(`PlaceName: ${PlaceName}, PlaceId: ${PlaceId}, PlaceImages: ${PlaceImages}, PlaceLocation: ${PlaceLocation}`)
                    return (
                        <div key={PlaceId}>
                            {/* Обробник натискання для показу ReadMoreInfoText */}
                            <NavLink to={"/read-more/"}>
                                <div className="FirstItem" style={{backgroundImage: `url(${PlaceImages})`}}>
                                    <button className="LikeButton"></button>
                                </div>
                            </NavLink>
                            <div className="UnderItmeText">
                                <span className="UnderItmeText1">{PlaceName}</span>
                                <br/>
                                <span className="UnderItmeText2">{city}</span>
                            </div>
                        </div>
                    );
                };
            }

            export default FindComponentItem;