OpenLayers TileLayer Extent issues on an infinitely panning map

Question

Apologies in advance, this is my first StackOverflow question.

I need to use an OpenLayers layer extent to place a boundary on a region of the map in order to prevent an XYZSource's url from trying to grab tiles that don't exist (resulting in 404 error messages).

I found this example which was helpful: How can you set the extent of a XYZ source using OpenLayers 6?

Here are the problems I ran into below:

Using an extent on an XYZSource directly

If I use an extent on the XYZSource, the extent expands and contracts at different zoom levels and never accurately shows the bounding box I expect.

Here is how it looks at 2 different zoom levels:

close up zoom no zoom

The good news is is that I can pan my map infinitely in either direction and the extent will always be displayed regardless of how many revolutions the map has moved.

Using an extent on the TileLayer itself

If I put the extent on the TileLayer instead, the extent stays the correct size regardless of zoom level, but when I pan in either direction beyond 1 revolution, the extent disappears. Here is how the bounding box should look:

constant size

Goal

My goal is to have the extent maintain a constant size and also always be displayed regardless of how many revolutions the map is panned in either direction.

Any help or suggestions would be greatly appreciated!

Code

  ngOnInit(): void {
    const token = 'sWmX5SwjXmDHtQNDFmI7CyUgBqUvRzxpT6CM5sSbBLqxd3bpJxNNAZ2O4Rivf1Eo';
    const urlDark = 'https://tile.jawg.io/jawg-dark/{z}/{x}/{y}.png?access-token=' + token;
    const urlStreets = 'https://tile.jawg.io/jawg-streets/{z}/{x}/{y}.png?access-token=' + token;

    // http://bboxfinder.com/#8.035094,68.964958,32.415038,89.179802
    const indiaExtent = [7677144.0284, 897408.9306, 9927450.1411, 3817914.9073];

    const defaultTileGrid = createXYZ({ extent: getProjection('EPSG:3857')?.getExtent() });
    const res = defaultTileGrid.getResolutions();
    const org = defaultTileGrid.getOrigin(16);

    this.map = new Map({
      view: new View({
        center: fromLonLat([78.781414, 22.164514]),
        zoom: 4,
      }),
      layers: [],
      target: 'ol-map',
    });

    var baseLayer = new TileLayer({
      source: new XYZSource({
        url: urlDark,
      })
    });

    var layerA = new TileLayer({
      source: new XYZSource({
        url: urlStreets,
        tileGrid: new TileGrid({
          origin: org,
          resolutions: res,
          extent: indiaExtent
        })
      })
    });

    var layerB = new TileLayer({
      extent: indiaExtent,
      source: new XYZSource({
        url: urlStreets,
      })
    });
  
    this.map.addLayer(baseLayer);
    this.map.addLayer(layerA);
    //this.map.addLayer(layerB);
  }
}

Stackblitz Link https://stackblitz.com/edit/angular-ivy-xv3xhn