Use react-leaflet with custom tilemap

I'm trying to use react-leaflet with a custom map to switch my project from javascript to React.

And I'm encountering some difficulties, when i'm setting the tileLayer url to my local map files, the map container just display nothing else then grey empty map.

Here is the code working with the openstreetmap :

import './Map.css';

import { MapContainer, TileLayer, useMap } from 'react-leaflet';

function Map() {

    const center = [51.505, -0.09]

    return (
            <MapContainer id="mapSection" center={center} zoom={13} scrollWheelZoom={false}>
                <TileLayer
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
            </MapContainer>
    )
}

export default Map;

Here is the result

And then, here is my code with custom map :

import './Map.css';

import { MapContainer, TileLayer, useMap } from 'react-leaflet';

function Map() {

    const center = [51.505, -0.09]

    return (
            <MapContainer id="mapSection" center={center} zoom={13} scrollWheelZoom={false}>
                <TileLayer
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                url="../../img/map/{z}/{x}/{y}.png"
                />
            </MapContainer>
    )
}

export default Map;

Here is the result