here is my react map gl code i need it to be able to move when the user drags on the map  

<ReactMapGL
            {...viewport}
            mapboxAccessToken={mapboxToken}
            mapStyle="mapbox://styles/mapbox/streets-v11"
            onViewportChange={handleViewportChange}
          >
            {stopCoordinates.map((stop) => (
              <Marker key={stop.label} latitude={stop.latitude} longitude={stop.longitude}>
                <img src={bus} alt="Bus stop icon" width={30} height={30} />
                <div className="marker">{stop.label}</div>
              </Marker>
            ))}
          </ReactMapGL>

 const handleViewportChange = (newViewport) => {
    setViewport(newViewport);
  };

this is my error:
Parameter 'newViewport' implicitly has an 'any' type.
Spread types may only be created from object types.
Cannot find name 'setViewport'. Did you mean 'newViewport'?

this is my full code:
const Home = () => {
  const [viewState, setViewState] = useState({
    latitude: 40.8634,
    longitude: -74.199567,
    zoom: 14.5,
    bearing: 0,
    pitch: 0,
    padding: { top: 0, right: 0, bottom: 0, left: 0 },
  });

  // const handleViewMapClick = () => {
  //   window.scrollTo(0, document.body.scrollHeight);
  // };

  const stopCoordinates = [
    { latitude: 40.8720293, longitude: -74.1987873, label: 'Stop 1' },
    { latitude: 40.8705887, longitude: -74.1988991, label: 'Stop 2' },
    { latitude: 40.870515, longitude: -74.2010166, label: 'Stop 3' },
    { latitude: 40.870515, longitude: -74.2013492, label: 'Stop 4' },
    { latitude: 40.8690749, longitude: -74.1996545, label: 'Stop 5' },
    { latitude: 40.8676239, longitude: -74.2006334, label: 'Stop 6' },
    { latitude: 40.867362, longitude: -74.2002158, label: 'Stop 7' },
    { latitude: 40.8650461, longitude: -74.1982911, label: 'Stop 8' },
    { latitude: 40.8668351, longitude: -74.1965947, label: 'Stop 9' },
    { latitude: 40.8610319, longitude: -74.2000521, label: 'Stop 10' },
    { latitude: 40.8595465, longitude: -74.2000869, label: 'Stop 11' },
  ];

  const handleViewportChange = (newViewport) => {
    setViewport(newViewport);
  };

  const [showMap, setShowMap] = useState(false);
  const mapRef = useRef<HTMLDivElement>(null);
  const handleViewMapClick = () => {
    setShowMap(true);
    if (mapRef.current) {
      mapRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <>
      <Navbar />
      <div className="view-map-container">
        <a className="view-map-link" onClick={handleViewMapClick}>
          View Map
        </a>
        <img src={map} alt="Map" className="map-image" />
      </div>
      <div>
        <StopInfo />
      </div>
      <div>
        <ViewRoutes />
      </div>
      <div>
        <ShuttleInfo />
      </div>
      <div className="map-container">
        <div ref={mapRef} className="react-map-gl d-flex justify-content-center">
          <ReactMapGL
            {...viewport}
            mapboxAccessToken={mapboxToken}
            mapStyle="mapbox://styles/mapbox/streets-v11"
            onViewportChange={handleViewportChange}
          >
            {stopCoordinates.map((stop) => (
              <Marker key={stop.label} latitude={stop.latitude} longitude={stop.longitude}>
                <img src={bus} alt="Bus stop icon" width={30} height={30} />
                <div className="marker">{stop.label}</div>
              </Marker>
            ))}
          </ReactMapGL>
        </div>
      </div>
    </>
  );
};
export default Home;

please fix the error 