javascript-NextJS，MapBox Gl，地图不会显示，控制台中没有错误，应用程序编译得很好

import Image from "next/image"
import {useState, useEffect} from 'react'
import ReactMapGl, { Marker } from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";




export default function EventMap({ evt }) {
  const [lat, setLat] = useState(null);
  const [lng, setLng] = useState(null);
  const [loading, setLoading] = useState(true);
  const [viewport, setViewport] = useState({
    latitude: 40.712772,
    longitude: -73.935242,
    width: "100%",
    height: "500px",
  
   
    zoom: 12,
    
  });
 
   useEffect(() => {
     const requestOptions = {
       method: "GET",
     };
     fetch(
       `https://api.geoapify.com/v1/geocode/search?text=${evt.address}&apiKey=${process.env.NEXT_PUBLIC_GEOAPIFY_API_KEY}`,
       requestOptions
     )
       .then((response) => response.json())
       .then((result) => {
         const lng = result.features[0].bbox[0];
         const lat = result.features[0].bbox[1];
         setLat(lat);
         setLng(lng);
         setViewport({ ...viewport, latitude: lat, longitude: lng });
         setLoading(false);
       })
       .catch((error) => console.log("error", error));
   }, []);

   if (loading) return false;

   return (
      setViewport(vp)}
      
      
     >
       
         
       
     
   );
}