Markers not showing up with react-google-maps/api

Question

I am trying to create a marker and have tried isolating the problem to just creating a marker already in the map when it loads.I am using React 17 and cannot upgrade to 18 because it will cause errors in other dependencies.

So far I've tried:

Using both <Marker and <MarkerF> as many articles suggest.

Turning off strict mode many articles suggest. Here is my root file showing this.

const rootElement = document.getElementById("root");

ReactDOM.render(
  <ChakraProvider theme={theme}>
    <App />
  </ChakraProvider>,
  rootElement
);

Here is the map file:

import { useLoadScript, GoogleMap, MarkerF } from "@react-google-maps/api";
import { newKey } from "../utils/maps";

export const MyMap: React.FC<MapProps> = ({ listOfSchools }) => {

  const { isLoaded } = useLoadScript({
    id: "google-map-script",
    googleMapsApiKey: `${newKey}`,
  });

const center = {
    lat: 41.4925,
    lng: 99.9018,
    };
const containerStyle = {
    width: "70vw",
    height: "100vh",
   };
  if (!isLoaded) return <div> Map is loading ...</div>;
  return (
    <div className="map-box">
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={15}
       
      />
      <MarkerF position={center}/>
    </div>
  );
};

The map is loading at the specified center, but no marker is shown.

I see the marker when inspecting, and noticed this error, despite removing the <StrictMode> tags from my root file as shown above. Is there another place to turn it off in React17?