In react-leaflet plotting Mbtiles in map

Question

I am new to map technology and I am using react-leaflet to plot GEOJSON to map. It was all going well but then I m facing load time with massive GeoJSON data, so need to convert GeoJSON to mbtiles. With the help of Tippecanoe I successfully converted GeoJSON to mbtiles.

Now the problem is how to plot those mbtiles in a map using react-leaflet. I used the TileLayer component to plot the map and worked on different methods to plot mbtiles using the TileLayer component of react-leaflet, but result is none.

Here is code snippet i tried to display tiles in react-leaflet:

<div className="map-section">
    <MapContainer
        style={{ height: "550px" }}
        center={this.state.location}
        zoom={this.state.zoom}
        minZoom="11"
    >
        <TileLayer
            url={process.env.PUBLIC_URL+"/mapdata/ward1.mbtiles"}
        />
    </MapContainer>
</div>