My issue involves a table where selecting a row should display the item's location on a map using react-map-gl in a Dialog component. However, upon clicking the row, the mapref returns null during the initial render, even though it should provide mapref objects like flyTo() and setCenter(). This unexpected behavior occurs only when launching the Modal.
I've included the full code below for reference:
import "mapbox-gl/dist/mapbox-gl.css";
import { useCallback, useEffect, useRef, useState } from "react";
import MapGl, {
FullscreenControl,
NavigationControl,
Marker,
Popup
} from "react-map-gl";
export default function MapDialog() {
// Functionality to handle the opening and closing of the Dialog
}
// More code here...
To better understand the issue and possible solutions, you can view the complete context by visiting this sandbox link: