I can't get the map to be interactive. Zoom and pan do not work. It just shows the map and the marker

[alfiofederico]

Hi, I am using react-geocode 0.2.3 along with react-map-gl 7.0.10, my problem is the map is not interactive, I cannot zoom in/out and the pan is not functional. Any help would be greatly appreciated, here is the code of the Component:

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

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: "500",
mapStyle: "mapbox://styles/mapbox/streets-v11",

zoom: 12,

});

useEffect(() => {
  // Get latitude & longitude from address.
  Geocode.fromAddress(evt.address).then(
    (response) => {
      const { lat, lng } = response.results[0].geometry.location;
      setLat(lat);
      setLng(lng);
      setViewport({ ...viewport, latitude: lat, longitude: lng });
      setLoading(false);
    },
    (error) => {
      console.error(error);
    }
  );
}, []);

Geocode.setApiKey(process.env.NEXT_PUBLIC_GOOGLE_MAP_API_KEY);

if (loading) return false;

console.log(lat, lng)
return (
<ReactMapGl
{...viewport}
mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_API_TOKEN}
onViewportChange={(vp) => setViewport(vp)}
style={{
overflow: "visible",
height: "500px",
width: "100%",

   }}
 >
   <Marker key={evt.id} latitude={lat} longitude={lng}>
     <Image src="/images/pin.svg" width={30} height={30} />
   </Marker>
 </ReactMapGl>

);
}

`

[Pessimistress]

You are using react-map-gl v6 code with v7. Read https://visgl.github.io/react-map-gl/docs/get-started/state-management

[alfiofederico]

Thank you so much!!!! It fixed it!