why I keep getting the render method error when i try to customize fonts in my project?

I want to use a custom font for my project but this error keeps appearing as soon as I run it on emulator

import { StyleSheet, Text, View } from 'react-native'import React from 'react';import {AppLoading} from 'expo';import * as Font from 'expo-font';import {useState} from 'react';

these are the imports

const getFonts=()=>{  return Font.loadAsync({    inkfree:require("./assets/fonts/Inkfree.ttf"),  } );};

and this is the method I used to get the fonts

const App=()=> {const[fontLoading,setfontloading]=useState(false);if(fontLoading){ return (<View><Text>App</Text></View>)}else{  return(<AppLoading    startAsync={getFonts}    onFinish={()=>setfontloading(true)}             />     )}}

and this is the main code

and i run to this error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.  Check the render method of `App`.This error is located at:    in App (created by ExpoRoot)    in ExpoRoot    in RCTView (created by View)    in View (created by AppContainer)    in RCTView (created by View)    in View (created by AppContainer)    in AppContainer    in main(RootComponent)