Got an error after installing mapbox in my bare react native app

Question

in my bare react native project, I have installed the mapbox ["@rnmapbox/maps": "^10.1.31"] with npm

npm install @rnmapbox/maps

after that, android/build.gradle, added the following -

allprojects {
    repositories {
        maven {
            url 'https://api.mapbox.com/downloads/v2/releases/maven'
            authentication {
                basic(BasicAuthentication)
            }
            credentials {
                // Do not change the username below.
                // This should always be `mapbox` (not your username).
                username = "mapbox"
                // Use the secret token you stored in gradle.properties as the password
                password = "secret token only added but not public token"
            }
        }
    }
}

after this, I have clean the gradle and and run the app

cd android
./gradlew clean
cd ..
npx react-native run-android

then at last, in root - app.tsx, I have imported the Mapbox and gave the public token

import React, { useEffect, useState } from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { NavigationContainer } from '@react-navigation/native';
import BaseNavigator from './src/navigators/BaseNavigator';
import { RootSiblingParent } from 'react-native-root-siblings';
import ErrorBoundary from 'react-native-error-boundary';
import { Image, Platform, StatusBar, StyleSheet } from 'react-native';
import ErrorScreen from './src/screens/ErrorScreen';
import { NativeBaseProvider } from 'native-base';
import { LogBox, View, Text } from 'react-native';
import Mapbox from '@rnmapbox/maps';

LogBox.ignoreLogs(['Warning: ...']);
LogBox.ignoreLogs(['Remote debugger']);
LogBox.ignoreLogs(['In React 18, SSRProvider is not necessary']);
LogBox.ignoreAllLogs();

const mapBoxToken = "pk.ey......";

Mapbox.setAccessToken(mapBoxToken);
Mapbox.setConnected(true);

const App: React.FC = () => {
  const [isLoaded, setIsLoaded] = useState<boolean>(false);

  const CustomFallback = (props: { error: Error; resetError: () => void }) => (
    <ErrorScreen resetError={props.resetError} />
  );

  useEffect(() => {
    Mapbox.setTelemetryEnabled(false);
  }, []);

    return (
      <SafeAreaProvider>
        <NavigationContainer>
          <RootSiblingParent>
            <ErrorBoundary FallbackComponent={CustomFallback}>
              <NativeBaseProvider>
                <StatusBar barStyle="dark-content" backgroundColor="#fff" />
                <BaseNavigator />
              </NativeBaseProvider>
            </ErrorBoundary>
          </RootSiblingParent>
        </NavigationContainer>
      </SafeAreaProvider>
    );
};

export default App;

then running the app in my phone - it throws an error -

Error: Exception in HostObject::get for prop 'RNMBXLocationModule': java.lang.UnsatisfiedLinkError: No implementation found for com.mapbox.common.location.LocationService com.mapbox.common.location.LocationServiceFactory.locationService() (tried Java_com_mapbox_common_location_LocationServiceFactory_locationService and Java_com_mapbox_common_location_LocationServiceFactory_locationService__) - is the library loaded, e.g. System.loadLibrary?, js engine: hermes

when I comment the code related to mapbox in app.tsx, then the remaining code is working and shows the screens.

can you guide me to fix the issue and show the map in my phone by running the app succesfully.