Cannot read property 'AppwriteProvider' of undefined

Question

While running the program I'm getting the error of Cannot read property 'AppwriteProvider' of undefined

Appwrite
Service.ts

import {Account, ID, Client} from 'appwrite';
import Config from 'react-native-config';

import Snackbar from 'react-native-snackbar';

const appwriteClient = new Client();

const APPWRITE_ENDPOINT = Config.APPWRITE_ENDPOINT!;
const APPWRITE_PROJECT = Config.APPWRITE_PROJECT_ID!;

type CreateUserAccount = {
  email: string;
  password: string;
  name: string;
};

type LoginUserAccount = {
  email: string;
  password: string;
};

class AppwriteService {
  account;

  constructor() {
    appwriteClient.setEndpoint(APPWRITE_ENDPOINT).setProject(APPWRITE_PROJECT);

    this.account = new Account(appwriteClient);
  }

  //create a new user account in appwrite

  async createAccount({email, password, name}: CreateUserAccount) {
    try {
      const userAccount = await this.account.create(
        ID.unique(),
        email,
        password,
        name,
      );

      if (userAccount) {
        //TODO
        return this.login({email, password});
      } else {
        return userAccount;
      }
    } catch (error) {
      Snackbar.show({
        text: String(error),
        duration: Snackbar.LENGTH_LONG,
      });
      console.log('Appwrite service :: createAccount() :: ' + error);
    }
  }

  async login({email, password}: LoginUserAccount) {
    try {
      const userAccount = await this.account.createEmailSession(
        email,
        password,
      );
      return userAccount;
    } catch (error) {
      Snackbar.show({
        text: String(error),
        duration: Snackbar.LENGTH_LONG,
      });
      console.log('Appwrite service :: loginAccount() :: ' + error);
    }
  }

  async getCurrentUser() {
    try {
      const userAccount = await this.account.get();
      return userAccount;
    } catch (error) {
      console.log('Appwrite service :: getCurrentUser() :: ' + error);
    }
  }

  async logout() {
    try {
      const userAccount = await this.account.deleteSession('current');
      return userAccount;
    } catch (error) {
      console.log('Appwrite service :: logout() :: ' + error);
    }
  }
}

export default AppwriteService;

AppwriteContext.tsx

import {FC, PropsWithChildren, createContext, useState} from 'react';

import Appwrite from './service';

type AppContextType = {
  appwrite: Appwrite;
  isLoggedIn: boolean;
  setIsLoggedIn: (isLoggedIn: boolean) => void;
};

export const AppwriteContext = createContext<AppContextType>({
  appwrite: new Appwrite(),
  isLoggedIn: false,
  setIsLoggedIn: () => {},
});

export const AppwriteProvider: FC<PropsWithChildren> = ({children}) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const defaultValue = {
    appwrite: new Appwrite(),
    isLoggedIn,
    setIsLoggedIn,
  };
  return (
    <AppwriteContext.Provider value={defaultValue}>
      {children}
    </AppwriteContext.Provider>
  );
};

export default AppwriteContext;

Inside Routes Folder -

AppStack.tsx

import {createNativeStackNavigator} from '@react-navigation/native-stack';

import Home from '../screens/Home';

export type AppStackParamList = {
  Home: undefined;
};

const Stack = createNativeStackNavigator<AppStackParamList>();

export const AppStack = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerTitleAlign: 'center',
        headerBackTitleVisible: false,
      }}>
      <Stack.Screen
        name="Home"
        component={Home}
        options={{
          title: 'Home',
        }}
      />
    </Stack.Navigator>
  );
};

AuthStack.tsx

import {createNativeStackNavigator} from '@react-navigation/native-stack';

import Register from '../screens/Register';
import Login from '../screens/Login';

export type AuthStackParamList = {
  Register: undefined;
  Login: undefined;
};

const Stack = createNativeStackNavigator<AuthStackParamList>();

export const AuthStack = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerTitleAlign: 'center',
        headerBackTitleVisible: false,
      }}>
      <Stack.Screen name="Register" component={Register} />
      <Stack.Screen name="Login" component={Login} />
    </Stack.Navigator>
  );
};

Router.tsx

import {View, Text} from 'react-native';
import React, {useContext, useEffect, useState} from 'react';
import {NavigationContainer} from '@react-navigation/native';

import {AppwriteContext} from '../appwrite/AppwriteContext';
import Loading from '../components/Loading';

// Routes
import {AuthStack} from './AuthStack';
import {AppStack} from './AppStack';

export const Router = () => {
  const [isloading, setIsLoading] = useState<boolean>(true);
  const {appwrite, isLoggedIn, setIsLoggedIn} = useContext(AppwriteContext);

  useEffect(() => {
    appwrite
      .getCurrentUser()
      .then(response => {
        setIsLoading(false);
        if (response) {
          setIsLoggedIn(true);
        }
      })
      .catch(error => {
        setIsLoading(false);
        setIsLoggedIn(false);
      });
  }, [appwrite, setIsLoggedIn]);

  if (isloading) {
    return <Loading />;
  }
  return (
    <NavigationContainer>
      {isLoggedIn ? <AppStack /> : <AuthStack />}
    </NavigationContainer>
  );
};

I tried everything but can't able of figure out how to solve it, I'm new to react native, and for the backend, I'm using Appwrite

App.tsx

import {Router} from './routes/Router';
import {AppwriteProvider} from './appwrite/AppwriteContext';

const App = () => {
  return (
    <AppwriteProvider>
      <Router />
    </AppwriteProvider>
  );
};

export default App;

error-

 TypeError: Cannot read property 'replace' of undefined, js engine: hermes
    at loadModuleImplementation (http://192.168.29.71:8081/index.bundle?platform=android&dev=true&minify=false&app=com.geekoverflow&modulesOnly=false&runModule=true:252:14)
    at RCTView
    at View (http://192.168.29.71:8081/index.bundle?platform=android&dev=true&minify=false&app=com.geekoverflow&modulesOnly=false&runModule=true:45860:43)
    at RCTView
    at View (http://192.168.29.71:8081/index.bundle?platform=android&dev=true&minify=false&app=com.geekoverflow&modulesOnly=false&runModule=true:45860:43)
    at AppContainer (http://192.168.29.71:8081/index.bundle?platform=android&dev=true&minify=false&app=com.geekoverflow&modulesOnly=false&runModule=true:45741:36)
    at geekoverflow(RootComponent) (http://192.168.29.71:8081/index.bundle?platform=android&dev=true&minify=false&app=com.geekoverflow&modulesOnly=false&runModule=true:83747:28)
 ERROR  TypeError: Cannot read property 'replace' of undefined, js engine: hermes
    at beginWork (http://192.168.29.71:8081/index.bundle?platform=android&dev=true&minify=false&app=com.geekoverflow&modulesOnly=false&runModule=true:70772:49)
    at RCTView
    at View (http://192.168.29.71:8081/index.bundle?platform=android&dev=true&minify=false&app=com.geekoverflow&modulesOnly=false&runModule=true:45860:43)
    at RCTView
    at View (http://192.168.29.71:8081/index.bundle?platform=android&dev=true&minify=false&app=com.geekoverflow&modulesOnly=false&runModule=true:45860:43)
    at AppContainer (http://192.168.29.71:8081/index.bundle?platform=android&dev=true&minify=false&app=com.geekoverflow&modulesOnly=false&runModule=true:45741:36)
    at geekoverflow(RootComponent) (http://192.168.29.71:8081/index.bundle?platform=android&dev=true&minify=false&app=com.geekoverflow&modulesOnly=false&runModule=true:83747:28)
 ERROR  TypeError: Cannot read property 'AppwriteProvider' of undefined

This error is located at:
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in geekoverflow(RootComponent), js engine: hermes
 ERROR  TypeError: Cannot read property 'AppwriteProvider' of undefined

This error is located at:
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in geekoverflow(RootComponent), js engine: hermes