leaflet.js negative get

HTML

<!-- default html 5 page -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
</head>
<body>
    <div id="map">
        
    </div>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <script src="/app.js"></script>
</body>

CSS

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
}

#map {
  flex: 1;
  width: 100%;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  border: solid 1px red;
}

JavaScript

const config = {
  tileSize: 1024,
  tilesAtZoom: {
    3: 2,
  },
  minZoom: 3,
  maxZoom: 3,
}

const fullMapSize = config.tileSize * config.tilesAtZoom[config.maxZoom]
const bounds = new L.LatLngBounds([0, 0], [fullMapSize, fullMapSize])

const map = L.map('map', {
  crs: L.CRS.Simple,
  minZoom: config.minZoom,
  maxZoom: config.maxZoom,
  zoom: 3,
  center: [1024, 1024],
  maxBounds: bounds,
  maxBoundsViscosity: 1.0,
})

const tileLayer = L.tileLayer('img/test/tiles/{z}/{x}/{y}.png', {
  tileSize: config.tileSize,
  minZoom: config.minZoom,
  maxZoom: config.maxZoom,
  noWrap: true,
  continousWorld: false,
  bounds: bounds,
})

tileLayer.addTo(map)