How can I shift leaflet map bounds without repeating the tiles? - leaflet

Question

I have a codepen demonstrating the issue at https://codepen.io/ericg_off/pen/KKoJvbK
I am using leaflet 1.8.0.
I have adjusted the map's maxBounds (const maxBounds = [[-90, -480], [90, -120]];) so the left and right edges of the map are
Left Edge ----- Right Edge
To accomplish this, I needed to allow the tileLayer to wrap around the antemeridian...so noWrap retains the default value of true.
So, when I zoom out, I get:
But, I would like to have similar behavior to what would happen if I left the maxBounds set to const maxBounds = [[-90, -180], [90, 180]]; and set noWrap: true which would look like:
i.e. the gray background outside of the maxBounds.
How can I do this?
HTML:
<div id="map"></div>
CSS:
#map {
height: 100vh;
}
JS:
const maxBounds = [
[-90, -480],
[90, -120]
];
// const maxBounds = [
// [-90, -180],
// [90, 180]
// ];
var map = L.map("map", {
center: [38.89, -77.03],
zoom: 3,
maxBounds
});
var tiles = new L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
minZoom: 0,
maxZoom: 8,
// noWrap: true
}
).addTo(map);