my code is not rendering the hexagon layer on my interactive map

[ImhotepX]

import React, { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { Map } from 'react-map-gl';
import maplibregl from 'maplibre-gl';
import { AmbientLight, PointLight, LightingEffect } from '@deck.gl/core';
import { HexagonLayer } from '@deck.gl/aggregation-layers';
import DeckGL from '@deck.gl/react';
import { csv } from 'd3-fetch';

// Source data CSV
const DATA_URL = './data.csv'; // Make sure this path is correct

// Lighting and material for HexagonLayer
const ambientLight = new AmbientLight({ color: [255, 255, 255], intensity: 1.0 });
const pointLight1 = new PointLight({ color: [255, 255, 255], intensity: 0.8, position: [-0.144528, 49.739968, 80000] });
const pointLight2 = new PointLight({ color: [255, 255, 255], intensity: 0.8, position: [-3.807751, 54.104682, 80000] });
const lightingEffect = new LightingEffect({ ambientLight, pointLight1, pointLight2 });
const material = { ambient: 0.64, diffuse: 0.6, shininess: 32, specularColor: [51, 51, 51] };

// Map and View settings
const INITIAL_VIEW_STATE = { longitude: 9.99302, latitude: 53.55073, zoom: 6.6, minZoom: 5, maxZoom: 15, pitch: 40.5, bearing: -27 };
const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json';

// Color range for HexagonLayer
const colorRange = [ [1, 152, 189], [73, 227, 206], [216, 254, 181], [254, 237, 177], [254, 173, 84], [209, 55, 78] ];

function getTooltip({ object }) {
if (!object) return null;
const { position, points } = object;
return latitude: ${position[1].toFixed(6)}\nlongitude: ${position[0].toFixed(6)}\n${points.length} Accidents;
}

export default function App({ mapStyle = MAP_STYLE, radius = 1000, upperPercentile = 100, coverage = 1 }) {
const [data, setData] = useState([]);

useEffect(() => {
// Fetch and process the CSV data
csv(DATA_URL).then(loadedData => {
const transformedData = loadedData.map(d => {
// Attempt to parse the latitude, longitude, and RSSI
// If any values are invalid, skip the data point
const latitude = parseFloat(d[1]);
const longitude = parseFloat(d[2]);
const rssi = parseFloat(d[4]); // Assuming RSSI is a number and the fifth column is index 4

    if(!isNaN(latitude) && !isNaN(longitude) && !isNaN(rssi)) {
      return { position: [longitude, latitude], rssi };
    }
    return null;
  }).filter(d => d); // Remove any null entries that were skipped

  console.log('Data Loaded:', transformedData);
  setData(transformedData);
}).catch(error => console.error('Error loading CSV:', error));

}, []);

const layers = [
new HexagonLayer({
id: 'heatmap',
data,
colorRange,
radius,
coverage,
elevationRange: [0, 3000],
elevationScale: data.length ? 50 : 0,
extruded: true,
getPosition: d => d.position,
pickable: true,
upperPercentile,
material,
transitions: { elevationScale: 3000 }
})
];

return (



);
}

export function renderToDOM(container) {
const root = createRoot(container);
root.render();
}
i am using the following code to render a haxagon layer on an interactive map by taking data from the csv file what can be the problem please