Google map isn't showing? - reactjs

Question

I have a google map approach that map itself isn't showing, I have 2 pieces of code the first is Map component itself, that's the code for it:
import React, {
useState,
useEffect,
useRef
} from 'react';
interface MapProps extends google.maps.MapOptions {
style: { [key: string]: string };
onClick?: (e: google.maps.MapMouseEvent) => void;
onIdle?: (map: google.maps.Map) => void;
children?: React.ReactNode;
}
const Map: React.FC<MapProps> = ({
onClick,
onIdle,
children,
style,
...options
}) => {
const MyStyle = {
width: '100%',
height: '600px'
}
const ref = useRef<HTMLDivElement>(null);
const [map, setMap] = useState<google.maps.Map>();
return (
<>
<div ref={ref} />
</>
)
}
export default Map;
The second component is App component, the one which Map is being rendered, its code is:
import Map from './components/mapComponent2';
import {
Wrapper,
Status
} from '#googlemaps/react-wrapper';
function App = () => {
const center = { lat: 30.033333, lng: 31.233334 };
const zoom = 5;
useEffect(() => {
if (ref.current && !map) {
setMap(new window.google.maps.Map(ref.current, {}));
}
if (map) {
["click", "idle"].forEach((eventName) =>
google.maps.event.clearListeners(map, eventName)
);
if (onClick) {
map.addListener("click", onClick);
}
if (onIdle) {
map.addListener("idle", () => onIdle(map));
}
}
}, [ref, map, onClick, onIdle]);
return(
<div className='App'>
<Wrapper apiKey={API_KEY} libraries={['places', 'drawing', 'geometry']}>
<Map
center={center}
onClick={onMapClick}
onIdle={onIdle}
zoom={zoom}
style={{ flexGrow: "1", height: '600px' }}
/>
</Wrapper>
</div>
)
}
export default App;
after giving the inner div the proper height and width the map element appears inside inner div but the element itself isn't showing, although all click handlers related to the map are working. Can any anyone help me to determine where's the problem?