I am working with 2 APIs. The data of the Api's is almost identical except for the name of the theatre and the price to see a movie. I'm currently mapping through and sending the props to my MovieComponent, but the issue is that the prop names are the same and I need to get another value for the {Price} for one cinema. Currently it is providing data from filmWorld and I need to display the cinemaWorld {Price} also. I'm wondering how to separate these two props so I can get the data on cinemaWorld Price. I can access this data from App.js by logging cinemaWorld.Movies[0].Price (Although I'll need to map through to get different Prices depending on the movie).

App.js:

function App() {

const [filmWorld, setFilmWorld] = useState([]);
  const [cinemaWorld, setCinemaWorld] = useState([]);

  useEffect(() => {
    const theaters = ["cinema", "film"];
    theaters.forEach((theater) => {
      async function getTheater() {
        const data = await api.getMoviesData(theater);
        if (data.Provider === "Film World") {
          setFilmWorld(data);
        } else {
          setCinemaWorld(data);
        }
      }
      getTheater();
    });
  }, []);

  const movies = useMemo(() => {
    if (!filmWorld.Provider) return [];
    return filmWorld.Movies.map((movie, index) => ({
      ...movie,
      cinemaWorldPrice:
        cinemaWorld.Provider && cinemaWorld.Movies[index]?.Price,
    }));
  }, [filmWorld, cinemaWorld]);

  return (
    <Container>
      <Header>
        <AppName>
          <MovieImage src={movieicon1} />
          Prince's Theatre
        </AppName>
      </Header>
      <MovieListContainer>
        {movies.map((movie, index) => (
          <MovieComponent key={index} movie={movie} />
        ))}
      </MovieListContainer>
    </Container>
  );
}

and my movieComponent:

const MovieComponent = (props) => {
  const { Poster, Price, Title } = props.movie;

  return (
    <MovieContainer>
      <CoverImage src={Poster} alt="" />
      <MovieName>{Title}</MovieName>

      <InfoColumn>
        <MovieInfo>FilmWorld: ${Price}</MovieInfo>
        <MovieInfo>CinemaWorld: ${Price}</MovieInfo>
      </InfoColumn>
    </MovieContainer>
  );
};