Features not showing

[bsrinath4839]

Hi,
I am using

"react": "^18.2.0",
"react-mapbox-gl": "^5.1.1"
"mapbox-gl": "^2.15.0"

This is my code

import "mapbox-gl/dist/mapbox-gl.css";
import React from "react";
import { mapConfig } from "../../constants/map.constants";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import ReactMapboxGl, { Feature, Layer, ZoomControl } from "react-mapbox-gl";

const Mapbox = ReactMapboxGl({
  accessToken: mapConfig.token,
  doubleClickZoom: true,
  dragPan: true,
  dragRotate: false,
  interactive: true,
  maxPitch: 0,
  maxZoom: 14,
  minPitch: 0,
  minZoom: 2.5,
  renderWorldCopies: false,
  touchPitch: false,
  touchZoomRotate: false,
});

const Map = () => {
  const { data } = useSelector((state) => state.data.nodes);
  const mapState = useSelector((state) => state.map.viewport);
  const navigate = useNavigate();
  const mapRef = React.useRef();
  console.log(mapRef);
  const handleMouseEnter = (event) => {
    if (event.map !== undefined) {
      event.map.getCanvas().style.cursor = "pointer";
    }
  };
  const handleMouseLeave = (event) => {
    if (event.map !== undefined) {
      event.map.getCanvas().style.cursor = "";
    }
  };

  const handleMarkerClick = (address) => {
    navigate(`/nodes/${address}`);
  };

  return (
    <Mapbox
      ref={mapRef}
      center={[mapState.longitude, mapState.latitude]}
      zoom={mapState.zoom}
      style={mapConfig.styles.custom}
      fitBounds={[
        [-180, -90],
        [180, 90],
      ]}
      containerStyle={{
        height: "100vh",
        width: "100vw",
      }}
      flyToOptions={{
        speed: 1,
      }}
      movingMethod="flyTo"
      renderChildrenInPortal={true}
    >
      {data && data.length > 0 && (
        <Layer
          type="circle"
          paint={{
            "circle-color": "#00B6FA",
            "circle-opacity": 0.8,
            "circle-radius": 6,
          }}
        >
          {data.map(({ location, address }, index) => (
            <Feature
              key={`marker-${index}`}
              onClick={() => handleMarkerClick(address)}
              coordinates={[location.longitude, location.latitude]}
              onMouseEnter={handleMouseEnter}
              onMouseLeave={handleMouseLeave}
            />
          ))}
        </Layer>
      )}
      <ZoomControl position={"bottom-right"} zoomDiff={1} />
    </Mapbox>
  );
};

export default Map;

When I render my inside the , the Features are not showing.
However, when I change any value in the state of redux store, the features are showing.

Also, I have tried too.
The Dots are showing at a different place than the actual location in Mobile view and they are Moving or Fixed at the same place on the screen when I drag the Map in the Desktop.

These issues happening before and after build.