reactjs - How can I visualize the map of google maps in React?

Question

I am trying to create a component which is a visualization of a map of google maps This is without using the google-map-react library since I want to make my own component

import React from 'react'
import { Helmet } from 'react-helmet';
let map;
function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}
export default function GoogleMap() {
    return (
        <>
            <Helmet>
                <script defer
                    src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap">
                </script>
            </Helmet>
            <div id="map"></div>
        </>
    )
}

This is the code I am using, but for some reason it is not painting anything and I get corset request errors, honestly I am lost in this, could someone help me? at least to know what my mistake is

Access to fetch at 'https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. this is the error message i get and this is where i wonder.

Do I need to make a request with fetch instead of directly using the script?

question from:https://stackoverflow.com/questions/66053056/how-can-i-visualize-the-map-of-google-maps-in-react

Answer 1

Waitting for answers