Create A Polar Coordinates Grid using react-leaflet

Question

I am currently working on a react component that could potentially create a Polar coordinates grid. In my React Project, i have to display on top of OSM (Open Street Map) two types of Grids (Rectangular Grid, and Polar Grid).

This is my Polar Grid component that i have created:

import React from 'react';
import { 
  Circle, 
  CircleMarker, 
  Marker, 
  Polygon, 
  Polyline, 
  Popup
} from 'react-leaflet';
import { 
  calculateIntersection, 
  generateDescendingArray 
} from '../utils/utils';

// Center: the posistion of the marker element
// maxRange: the max range for Circle element
// numRanges: number of <Circles /> to use
// Sectors: the number of division to split the circles

const PolarGrid = ({center, maxRange, numRanges, rangeStep, sectors }) => {

  // Sorted Array of Rings ranges
  // rangeStep: Distance between two rings
  const sortedRanges = generateDescendingArray(maxRange, rangeStep);
  const pathOptions = {
    stroke: 'false',
    fillOpacity: '0.2',
    opacity: '1',
    weight: '2',
    fillColor: 'rgb(125,125,125)',
    color: 'rgba(0,0,0, 0.5)',
  };
  const createCircle = (radius, index) => {
    return <Circle
              key={index}
              center={center} 
              radius={radius} 
              pathOptions={pathOptions}
            />;
  };
  const createSectorLines = () => {
    const lines = [];
    for (let i = 0; i < sectors; i++) {
      const angle = (i * Math.PI) / (sectors / 2);
      const tangLine = (
        <Polyline
          key={`polyline-${i}`}
          positions={[
            calculateIntersection(center, sortedRanges[0], angle),
            calculateIntersection(center, sortedRanges[0], angle + Math.PI),
          ]}
          pathOptions={pathOptions}
        />
      );
      lines.push(tangLine);
    }
    return lines;
  };
  return (
    <>
      {sortedRanges.map((range, i) => createCircle(range, i))}
      {createSectorLines()}
    </>
  );
};
export default PolarGrid;

calculateIntersection() is basically a function that calculates the intersection points between elements and elements to draw the Polar shape:

// Function to calculation the angle rotation for point intersection with polar range
export const calculateIntersection = (center, range, angle) => {
    const intersectionPoint = [
      center[0] + metersToLat(range) * Math.cos(angle),
      center[1] + metersToLng(range, center[0]) * Math.sin(angle),
    ];

    return intersectionPoint;
};

So basically this component gives the below shape according to the giving propos. For example:

function App() {

  return (

    <>
      <MapContainer 
        center={center} 
        zoom={14}
        maxZoom={17}
        minZoom={11}
        style={{ height: '100vh', width: '100%' }}
      >
        <TileLayer 
          url='http://localhost:3001/tiles/{z}/{x}/{y}.png'
        />
          <LayersControl.Overlay checked name='show polar'>
            <FeatureGroup>
              <PolarGrid
                  center={[46.2097824357196, 6.139475957830832]}
                  maxRange={600}
                  rangeStep={200}
                  sectors={4}
               />
            </FeatureGroup>
          </LayersControl.Overlay>
        </LayersControl>
      </MapContainer>
    </>
    

  );
}
export default App;

What i am tryring basically to acheive, is that i can be able to click on the Polar Coordinates Grid Cells, and when the cell is being clicked turns to Green as i did with the Rectangular Grid (image bellow):