title: Marker not rendering react-google-maps
body: <p>I am using React version 18.1 and &quot;@react-google-maps/api&quot; version 2.10. (Noted that just for reference). I am trying to render marker on a map with certaing position and for some reason I am not sure why(I am new to React) it is not working. Here is the full code:</p>
  <pre><code>import React, { Fragment, useState, useEffect, useRef, useCallback}  from 'react';
  
  import { getPlacesData } from '../api';
  
  import { useLoadScript, GoogleMap, Marker, InfoWindow } from '@react-google-maps/api';
  
  import List from '../components/List';
  import Container from 'react-bootstrap/Container';
  import Row from 'react-bootstrap/Row';
  import Col from 'react-bootstrap/Col';
  
  
  const Main = () =&gt; {
  
    const { isLoaded, loadError } = useLoadScript({
      googleMapsApiKey: &quot;YOUR_API_KEY&quot;
    });
  
    const mapRef = useRef(null);
  
  
    const [places, setPlaces] = useState([]);
    const [clickedLatLng, setClickedLatLng] = useState(null);
    const [startingPositon, setStartingPositon] = useState({
    lat: -3.745,
    lng: -38.523
    });
    const [coordinates, setCoordinates] = useState({
    lat: -3.745,
    lng: -38.523
    });
    const [bounds, setBounds] = useState(null);
  
    useEffect(() =&gt; {
      navigator.geolocation.getCurrentPosition(({ coords: {latitude, longitude}}) =&gt; {
      setStartingPositon({ lat: latitude, lng: longitude})
      setCoordinates({ lat: latitude, lng: longitude})
  
      })
    }, []);
  
  
    function handleLoad(map) {
      mapRef.current = map;
    }
  
    const handleOnUnmount = useCallback(() =&gt; {
      mapRef.current = null
    }, []);
  
    function handleCenterChanged() {
      if (!mapRef.current &amp;&amp; typeof mapRef.current !== &quot;undefined&quot; ) return;
      const newPos = mapRef.current.getCenter().toJSON();
      setCoordinates(newPos);
    }
  
    function handleBoundsChanged() {
      if (!mapRef.current &amp;&amp; typeof mapRef.current !== &quot;undefined&quot; ) return;
      const neLat = mapRef.current.getBounds().getNorthEast().lat();
      const neLng = mapRef.current.getBounds().getNorthEast().lng();
      const swLat = mapRef.current.getBounds().getSouthWest().lat();
      const swLng = mapRef.current.getBounds().getSouthWest().lng();
      const currentBounds = { 'ne': {neLat, neLng } , 'sw': {swLat, swLng}};
      setBounds(currentBounds);
    }
  
    /*useEffect(() =&gt; {
      if(bounds !== null){
        getPlacesData(bounds)
          .then((data) =&gt; {
            if (data !== undefined) {
              for (const [key, value] of Object.entries(data)) { 
                if ( value.longitude ===undefined) {
                  delete data[key]
                }}
            }
            console.log(data);
            setPlaces(data);
            console.log(places)})
        };
    }, [coordinates, bounds]);*/
  
    return (
      &lt;&gt;
        &lt;Container fluid&gt;
          &lt;Row&gt;
            &lt;Col xs={12} md={4} lg={4}&gt;
              &lt;List places={places} /&gt;
            &lt;/Col&gt;
            &lt;Col sm={12} md={8} lg={8}&gt;
            {isLoaded ? (
              &lt;Fragment&gt;
                &lt;GoogleMap
                  onLoad={handleLoad}
                  onUnmount={handleOnUnmount}
                  onCenterChanged={handleCenterChanged}
                  onBoundsChanged={handleBoundsChanged}
                  onClick={e =&gt; setClickedLatLng(e.latLng.toJSON())}
                  center={startingPositon}
                  zoom={10}
                  mapContainerClassName=&quot;map-container&quot;
                 &gt;
                  &lt;Marker position={{lat: 40.3439616, lng: 49.8106368}}&gt;
                    &lt;InfoWindow position={{lat: 40.3439616, lng: 49.8106368}}&gt;
                      &lt;div&gt;Test&lt;/div&gt;
                    &lt;/InfoWindow&gt;
                  &lt;/Marker&gt;
                  
                &lt;/GoogleMap&gt;
                {/* Our center position always in state */}
                &lt;h3&gt;
                  Center {coordinates.lat}, {coordinates.lng}
                &lt;/h3&gt;
  
                {/* Position of the user's map click */}
                {clickedLatLng &amp;&amp; (
                  &lt;h3&gt;
                    You clicked: {clickedLatLng.lat}, {clickedLatLng.lng}
                  &lt;/h3&gt;
                )}
              &lt;/Fragment&gt;
        ) : (
          &lt;div&gt;
            Loading...
          &lt;/div&gt;
        )}
              
            &lt;/Col&gt;
          &lt;/Row&gt;
        &lt;/Container&gt;
      &lt;/&gt;
      )
  }
  
  export default Main;
  </code></pre>
  <p>And here is a map part alone:</p>
  <pre><code>{isLoaded ? (
              &lt;Fragment&gt;
                &lt;GoogleMap
                  onLoad={handleLoad}
                  onUnmount={handleOnUnmount}
                  onCenterChanged={handleCenterChanged}
                  onBoundsChanged={handleBoundsChanged}
                  onClick={e =&gt; setClickedLatLng(e.latLng.toJSON())}
                  center={startingPositon}
                  zoom={10}
                  mapContainerClassName=&quot;map-container&quot;
                 &gt;
                  &lt;Marker position={{lat: 40.3439616, lng: 49.8106368}}&gt;
                    &lt;InfoWindow position={{lat: 40.3439616, lng: 49.8106368}}&gt;
                      &lt;div&gt;Test&lt;/div&gt;
                    &lt;/InfoWindow&gt;
                  &lt;/Marker&gt;
                  
                &lt;/GoogleMap&gt;
                {/* Our center position always in state */}
                &lt;h3&gt;
                  Center {coordinates.lat}, {coordinates.lng}
                &lt;/h3&gt;
  
                {/* Position of the user's map click */}
                {clickedLatLng &amp;&amp; (
                  &lt;h3&gt;
                    You clicked: {clickedLatLng.lat}, {clickedLatLng.lng}
                  &lt;/h3&gt;
                )}
        &lt;/Fragment&gt;
    &lt;div&gt;
            Loading...
          &lt;/div&gt;
        )}
  </code></pre>
  <p>Sorry for the little detail and a lot of code. But some weird thing I noticed. When putting  inside marker without position it runs into following error:</p>
  <pre><code>Uncaught Invariant Violation: You must provide either an anchor (typically render it inside a &lt;Marker&gt;) or a position props for &lt;InfoWindow&gt;
  </code></pre>
  <p>This stops the app from rendering, however when position provided InfoWindow is not displaying either. Also if trying to put info window alone, without Marker it is still not displaying.
  This leads me to believe that for some reason GoogleMap component is not reading what is inside it. I fail to understand why though.</p>
  <p>Thanks a lot for reading and for potential suggestions.</p>