Create a choropleth map of all cities in world in react js

I am trying to make a choropleth map of the world but with city level detail where a region of world or country explored by a user gets a color. So far I am able to find solutions to create a world map with country level shapes or polygons in geojson. This is what I currently have.

What I wish to achieve is when I zoom in should be able to see similar output but with city or state or province level details.

What I have is has been built using react-leaflet and geojson file that contains boundaries of all the countries in the world.

I've been looking all over the internet for city level geojson or a map library that can help me but no luck so far. Here is the code

import { MapContainer, Marker, GeoJSON, useMap, TileLayer } from 'react-leaflet';
import React, { useRef, useEffect, useState, useLayoutEffect } from 'react';
import mapData from './test.json';
const imagePin = '/images/map-pin.png';
import L from 'leaflet';
import LayersSelector from 'components/atoms/LeafletMap/LayersSelector';
import LeafletMapUtils from './logic';
import { MapView } from './types';

type IProps = {
    pins: any;
    center?: [number, number];
    zoom?: number;
};
const Map = ({
    pins = [],
    center = [0.9137839459007647, 1.3199101440788825],
    zoom = 2.3
}: IProps) => {
    const mapRef = useRef();
    const [mapView, setMapView] = useState(MapView.SATELLITE);

  
    return (
        <div className="h-full w-full">
            <MapContainer
                ref={mapRef}
                center={[0.9137839459007647, 1.3199101440788825]}
                zoom={zoom}
                zoomSnap={0.1}
                zoomControl={false}
                // className={styles.leafletContainer}
                scrollWheelZoom={true}
                style={{ height: '100%', width: '100%' }}
                // maxBounds={bounds}
                // crs={L.CRS.Simple}
            >
               

                {mapView === MapView.JINNI && (
                    <GeoJSON
                        style={{
                            fillColor: '#EBEBEB',
                            fillOpacity: 1,
                            // color: '#717171',
                            weight: 0.5,
                            stroke: true,
                            color: '#000000'
                            // border: '1px solid #dddd'
                        }}
                        onEachFeature={(country, layer) =>
                            LeafletMapUtils.onEachCountry(country, layer)
                        }
                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                        // @ts-ignore
                        data={mapData}
                    />
                )}

            </MapContainer>
            
        </div>
    );
};

export default Map;