Maps and Drawing manager not rendering in the web page. Even if Map did show up, Drawing manager is not working.

[mahijendra]

I've been trying to render a Map using @react-google-maps/api": "^2.12.1 in my react-hook-form": "^7.33.1. The requirement was to show the map onClick of the input, and the user should draw a polygon on the Map using Drawing Manager. When I use the Loadscript and GoogleMap component in my form it's eitherstucqk at LOADING... or nothing shows up.

This is my code, I've been trying to get this working for quite a while now and I'm nowhere near the solution. I've gone through most of the questions but most of the answers were outdated in issues or I couldn't find anything since most of the people are using react-google-maps where it has been completely redesigned to @react-google-maps/api": "^2.12.1.

The weird thing is the exact code is working in codesandbox. I don't know what I'm doing wrong, I', not able to wrap my head around it.

import React from "react";
import ReactDOM from "react-dom";
import { LoadScript, GoogleMap, DrawingManager } from "@react-google-maps/api";

const containerStyle = {
  width: "400px",
  height: "400px",
};

const API_KEY = "";

export default function GoogleMaps() {
  const [state, setState] = React.useState({
    drawingMode: "polygon",
  });

  const noDraw = () => {
    setState(function set(prevState) {
      return Object.assign({}, prevState, {
        drawingMode: "maker",
      });
    });
  };

  return (
    <div className="App">
      <LoadScript
        id="script-loader"
        googleMapsApiKey={API_KEY}
        libraries={["drawing"]}
        language="en"
        region="us"
      >
        <GoogleMap
          mapContainerClassName={containerStyle}
          center={{
            lat: 38.9065495,
            lng: -77.0518192,
          }}
          zoom={10}
          version="weekly"
        >
          <DrawingManager
            drawingMode={state.drawingMode}
            options={{
              drawingControl: true,
              drawingControlOptions: {
                drawingModes: ["polygon"],
              },
              polygonOptions: {
                fillColor: `#2196F3`,
                strokeColor: `#2196F3`,
                fillOpacity: 0.5,
                strokeWeight: 2,
                clickable: true,
                editable: true,
                draggable: true,
                zIndex: 1,
              },
            }}
            onPolygonComplete={(poly) => {
              /*const polyArray = poly.getPath().getArray();
              let paths = [];
              polyArray.forEach(function(path) {
                paths.push({ latitude: path.lat(), longitude: path.lng() });
              });
              console.log("onPolygonComplete", polyArray);*/
              console.log("onPolygonComplete", poly);
              noDraw();
            }}
            /*onOverlayComplete={poly => {
              const polyArray = poly.getPath().getArray();
              let paths = [];
              polyArray.forEach(function(path) {
                paths.push({ latitude: path.lat(), longitude: path.lng() });
              });
              console.log("onOverlayComplete", polyArray);
            }}*/
          />
        </GoogleMap>
      </LoadScript>
    </div>
  );
}