The position and size of my Tile Map is incorrect when it is displayed in React-Leaflet

I converted the GeoTIFF file to a tiles map. I’d like to display it in react-leaflet, but the size and position are not right.

What can I do to fix it?

This is condition when displayed.
(overlaid on OpenStreetMap whose position is correct)

If working properly, it should be located in about 100-meter square a place in Japan.

This is my TileLayer component for displaying my tiles map.

<TileLayer
    url="http://localhost:3333/assets/tms/{z}/{x}/{y}.png"
    noWrap="true"
    tms="true"
/>

Here is my gdalinfo from my GeoTiff file.

Driver: GTiff/GeoTIFF
Files: GeoTiff.tif
Size is 9105, 5977
Coordinate System is:
GEOGCS["WGS 84",
    DATUM["WGS_1984",
        SPHEROID["WGS 84",6378137,298.257223563,
            AUTHORITY["EPSG","7030"]],
        AUTHORITY["EPSG","6326"]],
    PRIMEM["Greenwich",0],
    UNIT["degree",0.0174532925199433],
    AUTHORITY["EPSG","4326"]]
Origin = (138.638412499999987,35.633808000000002)
Pixel Size = (0.000000210840198,-0.000000163275891)
Metadata:
  AREA_OR_POINT=Area
  TIFFTAG_SOFTWARE=pix4dmapper
Image Structure Metadata:
  INTERLEAVE=PIXEL
Corner Coordinates:
Upper Left  ( 138.6384125,  35.6338080) (138d38'18.28"E, 35d38' 1.71"N)
Lower Left  ( 138.6384125,  35.6328321) (138d38'18.28"E, 35d37'58.20"N)
Upper Right ( 138.6403322,  35.6338080) (138d38'25.20"E, 35d38' 1.71"N)
Lower Right ( 138.6403322,  35.6328321) (138d38'25.20"E, 35d37'58.20"N)
Center      ( 138.6393723,  35.6333201) (138d38'21.74"E, 35d37'59.95"N)
Band 1 Block=9105x1 Type=Byte, ColorInterp=Red
  NoData Value=-10000
  Mask Flags: PER_DATASET ALPHA 
Band 2 Block=9105x1 Type=Byte, ColorInterp=Green
  NoData Value=-10000
  Mask Flags: PER_DATASET ALPHA 
Band 3 Block=9105x1 Type=Byte, ColorInterp=Blue
  NoData Value=-10000
  Mask Flags: PER_DATASET ALPHA 
Band 4 Block=9105x1 Type=Byte, ColorInterp=Alpha
  NoData Value=-10000

Here is my tilemapresource.xml from my TileMapService.

<?xml version="1.0" encoding="utf-8"?>
    <TileMap version="1.0.0" tilemapservice="http://tms.osgeo.org/1.0.0">
      <Title>GeoTiff.tif</Title>
      <Abstract></Abstract>
      <SRS>EPSG:4326</SRS>
      <BoundingBox minx="138.63841249999999" miny="35.63254780813838" maxx="138.64033219999999" maxy="35.63380800000000"/>
      <Origin x="138.63841249999999" y="35.63254780813838"/>
      <TileFormat width="256" height="256" mime-type="image/png" extension="png"/>
      <TileSets profile="raster">
        <TileSet href="0" units-per-pixel="0.00001349377265" order="0"/>
        <TileSet href="1" units-per-pixel="0.00000674688633" order="1"/>
        <TileSet href="2" units-per-pixel="0.00000337344316" order="2"/>
        <TileSet href="3" units-per-pixel="0.00000168672158" order="3"/>
        <TileSet href="4" units-per-pixel="0.00000084336079" order="4"/>
        <TileSet href="5" units-per-pixel="0.00000042168040" order="5"/>
        <TileSet href="6" units-per-pixel="0.00000021084020" order="6"/>
      </TileSets>
    </TileMap>

I tried too epsg:3857, the same CRS as OSM, but it didn’t change.

L.imageOverlay(imageUrl, imageBounds).addTo(map);