Implementing online/offline map on android

[DanSC1Thirdeye]

Hey, I have an app that requires both online and offline maps.
I want it to be build so I have a default layer with zoom 0 - 5 of the whole world,
then another changing layer based on what the user chooses for more detailed region and online map above all.
My issue is that I want the tiles from the detailed map to show on top of the online when the user is not online or the online source dosn't have the requested tile.

my style currently looks like this

{
  "version": 8,
  "name": "test",
  "zoom": 15.0,
  "bearing": 0,
  "pitch": 0,
  "sources": {
    "maptiler-default_overlay-source": {
      "type": "raster",
      "tileSize": 256,
      "url": "___DEFAULT_REGION_FILE_URI___"
    },
    "maptiler-overlay-source": {
      "type": "raster",
      "tileSize": 256,
      "url": "___DETAILED_REGION_FILE_URI___"
    },
    "maptiler-online-source": {
      "type": "raster",
      "tileSize": 256,
      "url": "___ONLINE_MAP_URI___"
    }
  },
  "layers": [
    {
      "id": "maptiler-default-overlay",
      "type": "raster",
      "source": "maptiler-default_overlay-source",
      "paint": {
        "raster-opacity": 1.0
      }
    },
    {
      "id": "maptiler-overlay",
      "type": "raster",
      "source": "maptiler-overlay-source",
      "paint": {
        "raster-opacity": 1.0
      }
    },
    {
      "id": "maptiler-online-overlay",
      "type": "raster",
      "source": "maptiler-online-source",
      "paint": {
        "raster-opacity": 1.0
      }
    }
  ],
  "glyphs": "asset://glyphs/{fontstack}/{range}.pbf"
}

It works OK but the issue is that the cached online map is drawn on top of the detailed region that is obviously more detailed when the user is offline.
Has anyone ever encountered anything like this?