Trying to set up basic google maps view in my project but it doesnt let me pan/zoom. As soon as I try it goes back to original position. The street view feature works, however.

I'm getting the message in the attached screenshot in console.

MapComp.tsx

"use client";

import { useState } from "react";
import {
  APIProvider,
  Map,
  AdvancedMarker,
  Pin,
  InfoWindow,
} from "@vis.gl/react-google-maps";

export function MapComp() {
  const api_key = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || "";
  const mapId = process.env.NEXT_PUBLIC_MAP_ID;
  console.log({ api_key });
  console.log({ mapId });

  const position = { lat: 53.54, lng: 10 };
  const [open, setOpen] = useState(false); //triggered when clicked marker
  return (
    <APIProvider apiKey={api_key}>
      <div style={{ height: "100vh", width: "100vw" }}>
        <Map zoom={8} center={{ lat: 66, lng: 12 }} mapId={mapId}>
          {" "}
          <AdvancedMarker position={position} onClick={() => setOpen(true)}>
            <Pin
              background={"grey"}
              borderColor={"green"}
              glyphColor={"purple"}
            />
          </AdvancedMarker>
          {open && (
            <InfoWindow position={position} onCloseClick={() => setOpen(false)}>
              <p>Test</p>
            </InfoWindow>
          )}
        </Map>
      </div>
    </APIProvider>
  );
}