CORS error when caling google maps API in React

Question

I am trying to use google maps API, Places, Autocomplete, and Geocoding. The only thing that doesn't work is getting the photo references. The website is written in React js.

Geocoding works properly, but I'm unable to get the photo references.

import React, { useState, useEffect } from "react";
import axios from "axios";
import GetPhotosReferences from "./GetPhotosReferences";

const Geocoding = ({ destinations }) => {
  const [placesIds, setPlacesIds] = useState([]);

  useEffect(() => {
    destinations.forEach((destination) => {
      let APP_ID = process.env.REACT_APP_Maps_API_Key;
      let formatted_address = destination;
      axios.get(`https://maps.googleapis.com/maps/api/geocode/json?address=${formatted_address}&key=${APP_ID}`).then((res) => {
        const placeId = res.data.results[0].place_id;
        setPlacesIds((prevPlacesIds) => [...prevPlacesIds, placeId]);
      });
    });
  }, [destinations]);

  return (
    <div>
      {placesIds.map((placeId, index) => (
        <GetPhotosReferences key={placeId} placesId={placeId} />
      ))}
    </div>
  );
};

export default Geocoding;

import React, { useState, useEffect } from "react";
import axios from "axios";

const GetPhotosReferences = (props) => {
  let [photos, setPhotos] = useState([]);

  useEffect(() => {
    let APP_ID = process.env.REACT_APP_Maps_API_Key;
    let placeId = props.placesId;
    console.log(placeId);
    axios.get(`https://maps.googleapis.com/maps/api/place/details/json?fields=name%2Crating%2Cphotos&place_id=${placeId}&key=${APP_ID}`).then((res) => {
      const photos = res.data.result.photos;
      console.log(photos);
      setPhotos(photos);
    });
  }, [props.placesId]);

  if (photos === undefined) return;

  return (
    <div className="Rerun flex flex-row gap-1 flex-wrap justify-center pt-4">
      {photos.map((photo, index) => (
        <img
          className="hover:opacity-75 transition ease-in-out duration-150"
          key={index}
          src={`https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=${photo.photo_reference}&key=${process.env.REACT_APP_Maps_API_Key}`}
          alt={`Place #${index + 1}`}
        />
      ))}
    </div>
  );
};

export default GetPhotosReferences;

I don't understand why I'm getting:

Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/place/details/json?fields=name%2Crating%2Cphotos&place_id=ChIJdd4hrwug2EcRmSrV3Vo6llI&key=AIzaSyAdnv5ZQnovFf5auefpDekgUs3R-My0Hpw' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I initially thought, I've found a workaround by placing https://maps.googleapis.com/maps/api as a proxy inside package.json, but it only works when used locally. Once I tried deploying on Netlify, it did not work. What am I missing here? Many thanks