How do I make google maps marker pin fixed at the centre of the map?

Question

I'm using npm install --save google-map-react to show google maps and here AnyReactComponent is the marker. I've given fixed position and inset-0 to the marker but when I start to drag the map it doesn't stay at the centre of the map, when I end the dragging then the fixed position works. What I want here is when user starts to drag the map, the pin should stay at the centre only.

<div
      className="mx-auto max-w-2xl relative"
      style={{ height: "100vh", width: "100%" }}
    >
      <GoogleMapReact
        bootstrapURLKeys={{ key: process.env.REACT_APP_GOOGLE_KEY }}
        defaultCenter={userInfo.center}
        defaultZoom={userInfo.zoom}
        onChange={(e) => updateMap(e)}
      >
        <AnyReactComponent
          lat={updatedPosition.lat}
          lng={updatedPosition.lng}
          text="My Marker"
        />
      </GoogleMapReact>
</div>

AnyReactComponent

const AnyReactComponent = ({ text }) => {
  return (
    <div className="bg-white sticky transform inset-0 z-50 ">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className="h-6 w-6"
        viewBox="0 0 20 20"
        fill="#FFF"
      >
        <path
          fillRule="evenodd"
          d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
          clipRule="evenodd"
        />
      </svg>
      <span className="text-xl text-white">{text}</span>
    </div>
  );
};