yarn add @vis.gl/react-google-maps

.env

NEXT_PUBLIC_GOOGLE_MAP_API_KEY=<YOUR-GOOGLE-MAP-API-KEY>

GoogleMap.tsx

"use client";

import { FC } from "react";
import { APIProvider, Map, Marker } from "@vis.gl/react-google-maps";

export const GoogleMap: FC = () => {
  const container = {
    width: "75%",
    height: "500px",
  };

  const position = {
    lat: 35.015312546648474,
    lng: 135.7650548364636,
  };

  return (
    <APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAP_API_KEY}>
      <Map center={position} zoom={15}>
        <Marker position={position} />
      </Map>
    </APIProvider>
  );
};

https://cloud.google.com/blog/ja/products/maps-platform/introducing-react-components-for-the-maps-javascript-api