Why I can't see lines and polygons on maps?

[akdmrali]

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 ? (

<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 }
}}
/>

) : <></>
}

export default App;`