react + google-maps: @googlemaps/react-wrapper (Yes It's really need at least two components)

1.js

import { Wrapper } from "@googlemaps/react-wrapper";

const ParentComponentThatWillReceiveGoogleMap = () => {
  return <Wrapper apiKey={"42-l337-lol-bbq"}>
            <MyGoogleMapComponent/>
         </Wrapper>
}

2.js

const MyGoogleMapComponent = () => {
  const ref = useRef(null);  
  const [map, setMap] = useState();

  useEffect(() => {
    if (ref.current && !map) {
      setMap(new window.google.maps.Map(ref.current, {
        center: {lat: -23.9851934, lng: -46.2332309}, 
        zoom: 16
      });
    }
  }, [map]);
  
   return <div style={{height: "800px", width: "100%"}} ref={ref}></div>
}

It's not production-ready (It's not releasing map-instance properly / useEffect)