I'm trying to load downloaded fonts along with google fonts using Font.loadAsync but it is giving me error:

Unable to resolve module ../../assets/fonts/sf-ui-text/SFUIText-Bold.ttf from /Users/bilal/Work/datumbrain/erp-app/src/utils/useFonts.js:

None of these files exist:
  * SFUIText-Bold.ttf
  * assets/fonts/sf-ui-text/SFUIText-Bold.ttf/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.svg|.native.svg|.svg)

Here is my code in App.js:

import { useCallback, useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux';
import colors from './src/constants/colors';
import AppNavigator from './src/navigation/AppNavigator';
import { store } from './src/redux/store';
import * as SplashScreen from 'expo-splash-screen';
import * as Font from 'expo-font';
import {
  FiraSans_300Light,
  FiraSans_400Regular,
  FiraSans_500Medium,
} from '@expo-google-fonts/fira-sans';
import { useFonts } from './src/utils/useFonts';

const App = () => {
  const [appIsReady, setAppIsReady] = useState(false);
  const prepare = async () => {
    try {
      const customFonts = await useFonts();
      await SplashScreen.preventAutoHideAsync();
      await Font.loadAsync({
        'Fira Sans 300': FiraSans_300Light,
        'Fira Sans 400': FiraSans_400Regular,
        'Fira Sans 500': FiraSans_500Medium,
        ...customFonts,
      });
    } catch (e) {
      console.warn(e);
    } finally {
      setAppIsReady(true);
      console.log('Loaded fonts...');
    }
  };
  const onLayoutRootView = useCallback(async () => {
    if (appIsReady) {
      await SplashScreen.hideAsync();
    }
  }, [appIsReady]);
  useEffect(() => {
    prepare();
  }, []);
  useEffect(() => {
    onLayoutRootView();
  }, [onLayoutRootView]);

  if (!appIsReady) {
    return null;
  }

  return (
    <Provider store={store} style={styles.container}>
      <AppNavigator />
    </Provider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.light,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
export default App;

and useFonts.js:

import * as Font from 'expo-font';

export const useFonts = async () => {
  await Font.loadAsync({
    SF: require('../../assets/fonts/sf-ui-text/SFUIText-Bold.ttf'),
  });
};