Typescript map 未显示控制台未显示任何错误@reactiongooglemapapi

因此，我正在try 整合谷歌 map ，我正在关注一篇关于next13类型脚本的说明的博客文章.我一直遵循到了应该显示 map 但什么都不显示的地步.控制台上也没有错误.请帮我解决这个问题

这是nextjs根页面

'use client';

import { useLoadScript } from '@react-google-maps/api';
import React from 'react';
import Ground from '@/app/components/Maps/Ground';

export default function Page() {
  const libraries = React.useMemo(() => ['places', 'routes', 'geocoding'], []);

  const { isLoaded } = useLoadScript({
    googleMapsApiKey: process.env.NEXT_GOOGLE_MAPS_INTEGRATION_API_KEY as string,
    libraries: libraries as any,
  });
  if (!isLoaded) {
    return <div>Loading...</div>;
  }

  return <Ground />;
}

这是渲染 map 组件的主页

import React from 'react';
import {
  GoogleMap,
  Marker,
  DirectionsRenderer,
  Circle,
  MarkerClusterer,
} from '@react-google-maps/api';
import { useMantineColorScheme } from '@mantine/core';
import { useLocation } from '@/app/dashboard-home/useLocation';
import { ICoordinates } from '@/interfaces/map';

type LatLngLiteral = google.maps.LatLngLiteral;
type DirectionsResult = google.maps.DirectionsResult;
type MapOptions = google.maps.MapOptions;

export default function Ground() {
  const [baseLocation, setBaseLocation] = React.useState<ICoordinates>();

  const { getUserLocation, errorMsg, loading } = useLocation();
  const { colorScheme } = useMantineColorScheme();

  React.useEffect(() => {
    async function fetchLocationInformation() {
      try {
        const userLocation = await getUserLocation();
        if (userLocation) {
          setBaseLocation(userLocation);
        }
      } catch (error) {
        console.log(errorMsg);
      }
    }
    fetchLocationInformation();
  }, []);

  const mapRef = React.useRef<GoogleMap>();
  const center = React.useMemo<LatLngLiteral | undefined>(
    () => (baseLocation ? { lat: baseLocation.latitude, lng: baseLocation.longitude } : undefined),
    [baseLocation]
  );

  const options = React.useMemo<MapOptions>(
    () => ({
      clickableIcons: true,
      scrollwheel: true,
      mapId: colorScheme === 'dark' ? 'faaa827d36c66866' : '8660e06b8e3da749',
    }),
    [colorScheme]
  );
  const onLoad = React.useCallback((map: any) => {
    mapRef.current = map;
  }, []);

  if (errorMsg) {
    return <div>{errorMsg}</div>;
  }
  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <>
      <GoogleMap
        zoom={8}
        center={center}
        options={options}
        onLoad={onLoad}
        mapContainerStyle={{
          width: '100%',
          height: '100%',
          position: 'relative',
          overflow: 'hidden',
        }}
      >
      </GoogleMap>
    </>
  );
}

I have made some changes to my package.json and added resolutions field and the error that says 'GoogleMap' cannot be used as a JSX component is gone I wish I can ping-point the area I need this help. If you require more code tell me. I don't deem useLocation() hook to be important, so what happens is it get the device location coordinates. Thanks in advance