Why react-google-maps/api doesn't show lines and polygons?

Question

I use react-google-maps/api library in main project but I can't see the lines I drew on the map. So I created demo project for try same code. it works. But main project doesn't work. I looked react versions, react-dom versions, react-google-maps/api versions. All three are the same versions. In main project; map and marker coming. But I want to draw a container or lines, it doesn't show. When I press double click, I get coordinate info to my console. So I get true coordinate info but I can't see lines and container. Why I can't see lines on my main project?

import React from 'react';
import { GoogleMap, useJsApiLoader, DrawingManager } from '@react-google-maps/api';

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

const center = {
  lat: -3.745,
  lng: -38.523
};

function App() {

  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: "my_Key"
  })

  const onLoad = React.useCallback(function callback(map) {
    const bounds = new window.google.maps.LatLngBounds(center);
    map.fitBounds(bounds);
  }, [])

  function getPaths(polygon) {
    var polygonBounds = polygon.getPath();
    var bounds = [];
    for (var i = 0; i < polygonBounds.length; i++) {
      var point = {
        lat: polygonBounds.getAt(i).lat(),
        lng: polygonBounds.getAt(i).lng()
      };
      bounds.push(point);
    }
    console.log("coordinates", bounds);
  }

  return isLoaded ? (
    <GoogleMap
      mapContainerStyle={containerStyle}
      center={center}
      zoom={10}
      onLoad={onLoad}
    >
      <DrawingManager
        defaultDrawingMode={window.google.maps.drawing.OverlayType.POLYGON}
        onPolygonComplete={value => getPaths(value)}
        defaultOptions={{
          drawingControl: true,
          drawingControlOptions: {
            position: window.google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
              window.google.maps.drawing.OverlayType.POLYGON
            ],
          },
          polygonOptions: { editable: true }
        }}
      />
    </GoogleMap>
  ) : <></>
}

export default App;

Answer 1

Check if react strict mode is on or not. It should be off. This fixed my polygon not showing on map issue