useRealm is not working properly in Realm and React Native

Here is my code

import React from 'react';
import Realm from 'realm';
import {createRealmContext} from '@realm/react';
import CButton from './src/components/atoms/CButton';

class Profile extends Realm.Object<Profile> {
  _id!: Realm.BSON.ObjectId;
  name!: string;
  static schema = {
    name: 'Profile',
    properties: {
      _id: 'objectId',
      name: 'string',
    },
    primaryKey: '_id',
  };
}

const realmConfig: Realm.Configuration = {
  schema: [Profile],
};

const {RealmProvider, useRealm, useObject, useQuery} =
  createRealmContext(realmConfig);

const RestOfApp = () => {
  const realm = useRealm();
  const changeProfileName = (profileToChange: Profile, newName: string) => {
    realm.write(() => {
      profileToChange.name = newName;
    });
  };

  return <CButton onClick={() => {}}>Test</CButton>;
};

function App(): JSX.Element {
  const realm = useRealm();

  return (
    <RealmProvider fallback={() => null}>
      <RestOfApp />
    </RealmProvider>
  );
}

I am using useRealm inside RealmProvider but still getting following error while running the app.

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

Help me on this, how can I fix? Thanks in advance

You can get the realm hooks and Providers using @realm/react directly. (Realm version >= v0.5.0)

import React from 'react';
import Realm from 'realm';
import {RealmProvider, useRealm, useObject, useQuery} from '@realm/react';
import CButton from './src/components/atoms/CButton';

class Profile extends Realm.Object<Profile> {
  _id!: Realm.BSON.ObjectId;
  name!: string;
  static schema = {
    name: 'Profile',
    properties: {
      _id: 'objectId',
      name: 'string',
    },
    primaryKey: '_id',
  };
}

const realmConfig: Realm.Configuration = {
  schema: [Profile],
};

const RestOfApp = () => {
  const realm = useRealm();
  const changeProfileName = (profileToChange: Profile, newName: string) => {
    realm.write(() => {
      profileToChange.name = newName;
    });
  };

  return <CButton onClick={() => {}}>Test</CButton>;
};

function App(): JSX.Element {
  const realm = useRealm();

  return (
    <RealmProvider {...realmConfig} fallback={() => null}>
      <RestOfApp />
    </RealmProvider>
  );
}

If this didn't help then this issue might also be helpful :
https://github.com/realm/realm-js/issues/5957