Error: R3F: AndroidProgressBar is not part of the THREE namespace! Did you forget to extend?

I’m working on a React Native project, and I’m using Three.js for rendering 3D content. I encountered the following error:

 Error: R3F: AndroidProgressBar is not part of the THREE namespace! Did you forget to extend? See: https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively

This error occurs when I try to render a progress bar while the 3D content is loading. I’ve already tried the following steps, but the issue persists:

1. Verified that the three package is correctly installed and imported.
2. Checked that all necessary components are correctly extended.
3. Made sure that the component I’m trying to use is correctly registered and imported.

Environment:

1. React Native version: 0.72.6
2. Platform: Android/iOS

Other Libraries:

"@react-three/drei": "^9.97.5",
"@react-three/fiber": "^8.0.0-beta.10",
"expo": "^49.0.0",
"expo-gl": "~13.0.1",
"r3f-native-orbitcontrols": "^1.0.9",
"react": "^18.0.0-rc.3",
"react-native": "0.72.6",

Code:

import React, { Suspense } from 'react';
import { Canvas } from '@react-three/fiber/native';
import { OrbitControls } from '@react-three/drei';
import { View } from 'react-native';
import { heightPercentageToDP } from 'react-native-responsive-screen';
import Loader from '../../../../components/loader';
import Model from './model';

const Male_Army_Model = () => {
 return (
   <View style={{ flex: 1 }}>
     <Canvas
       shadows
       gl={{ antialias: true }}
       style={{ marginBottom: heightPercentageToDP(3) }}
     >
       <ambientLight intensity={1} />
       <pointLight position={[10, 70, 70]} intensity={1.5} castShadow />
       <directionalLight
         position={[5, 5, 5]}
         intensity={1.5}
         castShadow
         shadow-mapSize-width={2048}
         shadow-mapSize-height={2048}
       />
       <directionalLight
         position={[-5, -5, -5]}
         intensity={1.5}
         castShadow
         shadow-mapSize-width={2048}
         shadow-mapSize-height={2048}
       />
       <directionalLight
         position={[2, -2, 1]}
         intensity={1.5}
         castShadow
         shadow-mapSize-width={2048}
         shadow-mapSize-height={2048}
       />
       <directionalLight
         position={[-2, 2, -1]}
         intensity={1.5}
         castShadow
         shadow-mapSize-width={2048}
         shadow-mapSize-height={2048}
       />

       <OrbitControls
         enableRotate
         enableZoom={false}
         rotateSpeed={1.0} // Consider reducing the rotate speed for smoother control
         enablePan={false}
         maxZoom={0.6}
         minZoom={0.6}
         maxPolarAngle={Math.PI / 3.5}
         minPolarAngle={Math.PI / 3.5}
       />

       <Suspense fallback={<Loader />}>
         <Model />
       </Suspense>
     </Canvas>
   </View>
 );
};

export default Male_Army_Model;

Any insights or suggestions would be greatly appreciated!