"Realm context not found. Did you call useRealm() within a <RealmProvider/>?"

I am trying to configure Realm on my React Native app.
This is my initial component where I am using RealmProvider:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import type {PropsWithChildren} from 'react';
import {
  Button,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import { AppProvider, createRealmContext, useApp, useRealm, UserProvider, useUser } from '@realm/react';
import Login from './Login';
import { Profile } from './Models';
import ProfileScreen from './ProfileScreen';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import SplashScreen from './SplashScreen';
import StartScreen from './StartScreen';

const Stack = createNativeStackNavigator();

const defaultPathLocalRealm = createRealmContext({
  schema: [Profile]
});

const {RealmProvider} = defaultPathLocalRealm;


function App(): JSX.Element {
  
  // const realmConfig: Realm.Configuration = {
  //   schema: [Profile],
  //   schemaVersion: 3,
  //   sync: {
  //       user: user,
  //       flexible: true,
  //       onError: console.error
  //   }
  // };
 
  return (

    <AppProvider id={'testmongo-lvvnx'}>
      <UserProvider fallback={Login}>
            <RealmProvider sync={{flexible: true, onError: console.error}}>
              <NavigationContainer>
                  <Stack.Navigator>
                      <Stack.Screen name='SplashScreen' component={SplashScreen}/>
                      <Stack.Screen name='Login' component={Login}/>
                      <Stack.Screen name='ProfileScreen' component={ProfileScreen}/>
                  </Stack.Navigator>
              </NavigationContainer>
            </RealmProvider>
      </UserProvider>
    </AppProvider>

  );
}

export default App;

The problem is that I get the error below when I call useRealm() on ProfileScreen:

Realm context not found. Did you call useRealm() within a ?

This is ProfileScreen:

import { useApp, useRealm, useUser } from "@realm/react"
import { useState } from "react"
import { Button, Text, TextInput, View } from "react-native"
import { Profile } from "./Models"

const ProfileScreen = () => {
    const realm = useRealm()

    const app = useApp()
    
    const save = async () => {
        try {

            realm.write(() => {
              const res = realm.create('Profile', {_id: 'klsdfds7fsdfhgfhfg8ysdfh', name: 'Besart', email: "besart.haxhidema@gmail.com"})

              console.log(res)
            })
        } catch (error) {
          console.log(error)
        }
    }

    const logout = () => {
        app.currentUser?.logOut()
    }

    return(
        <View>
            <Button onPress={save} title="Save"/>

            <Button onPress={logout} title="Logout"/>
        </View>
    )
}

export default ProfileScreen

This is Profile schema:

import Realm from 'realm';

export class Profile extends Realm.Object<Profile>{
    _id!: string;
    name!: string;
    email?: string;

    static schema = {
        name: 'Profile',
        properties: {
            _id: 'string',
            name: 'string',
            email: 'string'
        },
        primaryKey: '_id'
    }
}