MapView looks for online maps even when I have downloaded offline maps for the same location

Question

I have a simple React Native app where I need to access map features offline. For that, I have a simple mapService.js file that checks whether I have offline maps downloaded, and downloads them if I don't. The code for the mapService.js file looks like this:

import MapboxGL from '@rnmapbox/maps';


export const downloadOfflineMap = async () => {
  const packName = 'MyMap';
  
  try {
    // Check if the offline pack already exists
    const existingPacks = await MapboxGL.offlineManager.getPacks();
    console.log(existingPacks);

    const existingPack = existingPacks.find(pack => pack.name === packName);
    
    if (existingPack) {
      console.log('Offline pack already exists. Skipping download.');
      return; // Skip downloading if pack exists
    }

    // If the pack does not exist, proceed to create it
    const offlinePack = {
      name: packName,
      styleURL: MapboxGL.StyleURL.Street,
      bounds: [
        [85.308953, 27.740347], // Northeast corner
        [85.307982, 27.739854], // Southwest corner
      ],
      minZoom: 16,
      maxZoom: 16,
    };

    await MapboxGL.offlineManager.createPack(offlinePack);
    console.log('Offline map downloaded successfully!');
  } catch (error) {
    console.error('Error downloading offline map:', error);
  }
};


export const removeMap = async (packName) => {

     await MapboxGL.offlineManager.deletePack(packName);
      console.log(`Removed offline pack: ${packName}`);

      const existingPacks = await MapboxGL.offlineManager.getPacks();
    console.log(existingPacks);
  };

Next, I have a MapComponent.js file through which I will render the map element anywhere in my app. The code for the file looks like this:

import React, { useEffect } from 'react';
import MapboxGL from '@rnmapbox/maps';
import { downloadOfflineMap, removeMap } from './mapService'; // Import your download function

const MapComponent = () => {
  useEffect(() => {
    // Call the function to download the offline map when the component mounts
    downloadOfflineMap();
    //removeMap('MyMap');
  }, []);

  return (
    <MapboxGL.MapView style={{ flex: 1 }} logoEnabled={false}>
      <MapboxGL.Camera
        centerCoordinate={[85.308440, 27.740159]} // Set your initial center
        zoomLevel={16} // Set initial zoom level to 16
        minZoomLevel={16} // Minimum zoom level
        maxZoomLevel={16} // Maximum zoom level // Adjust as necessary
      />
      {<MapboxGL.UserLocation />}
      <MapboxGL.PointAnnotation
        id="marker"
        coordinate={[85.308440, 27.740159]} // Your marker coordinates
      >
        <MapboxGL.Callout title="Your Marker Title" />
      </MapboxGL.PointAnnotation>
    </MapboxGL.MapView>
  );
};

export default MapComponent;

Now, when I first download the offline maps with internet connection and console log the map data, I see something like this:

[{
    "_metadata": {
        "_rnmapbox": [Object],
        "name": "MyMap"
    },
    "pack": {
        "bounds": [Array],
        "completedResourceCount": 2,
        "completedResourceSize": 9179011,
        "expires": "Wed Oct 23 20:20:07 GMT+05:45 2024",
        "metadata": "{\"name\":\"MyMap\",\"_rnmapbox\":{\"bounds\":{\"coordinates\":[[[85.308953,27.740347],[85.307982,27.740347],[85.307982,27.739854],[85.308953,27.739854],[85.308953,27.740347]]],\"type\":\"Polygon\"},\"zoomRange\":[16,16],\"styleURI\":\"mapbox:\\/\\/styles\\/mapbox\\/outdoors-v11\"}}",
        "percentage": 100,
        "requiredResourceCount": 2,
        "state": "complete"
    }
}]

This suggests that I have downloaded the offline map correctly. The problem arises when I turn off internet connectivity after I've downloaded the file, but the MapView looks for online map files on the internet. Then, I get heaps of errors when it can't get map tiles being offline. The error messages look like:

ERROR  Mapbox [error] RNMBXMapView | Map load failed: {tile-id={x=3015, y=1720, z=12}, type=tile, message=Failed to load tile: Unable to resolve host "api.mapbox.com": No address associated with hostname, begin=162049018657, source-id=composite}
 ERROR  Mapbox [error] RNMBXMapView | Map load failed: {tile-id={x=3015, y=1720, z=12}, type=tile, message=Failed to load tile: Unable to resolve host "api.mapbox.com": No address associated with hostname, begin=162049018686, source-id=composite}

Thus, even though I've downloaded the offline files (I think), I can't use them.

I just did some checking and found out that I can download offline maps even when I am not connected to the internet!!!! Now, that is strange.

Please provide any kind of guidance for me. It's been a day since I've been trying to use the offline maps feature and I don't seem to get any closer to success.

Thank you in advance.

I was hoping that I would be able to use the offline maps once I had downloaded them.

NOTE: It is not a problem of authentication. I have the MapboxGL.setAccessToken() code in the App.js file itself.