ERROR fontFamily "Poppins-Medium" is not a system font and has not been loaded through Font.loadAsync

Question

I am getting error for Poppins-Medium font. I have installed expo-font and wrote necessary code. Still getting this error

{
  "name": "food-app-ui",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/webpack-config": "^18.0.1",
    "@react-navigation/native": "^6.1.6",
    "expo": "^48.0.0",
    "expo-font": "~11.1.1",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.8",
    "react-native-google-fonts": "^0.0.0",
    "react-native-onboarding-swiper": "^1.2.0",
    "react-native-paper": "^5.8.0",
    "react-native-svg": "13.4.0",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "~0.18.11"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

this is my App.js

import { StatusBar } from "expo-status-bar";

import { StyleSheet, Text, View } from "react-native";
import OnboardingScreen from "./screens/Onboarding/OnboardingScreen";
import { loadFonts } from "./components/fontLoader";
import React, { useEffect } from "react";


export default function App() {
  useEffect(() => {
    loadFonts();
  }, []);

  return <OnboardingScreen />;
}

and this is my Onboarding.js

import React from "react";
import { View, Text, Button, StyleSheet, Image } from "react-native";
import Onboarding from "react-native-onboarding-swiper";

const OnboardingScreen = () => {
  return (
    <View style={styles.container}>
      <Onboarding
        pages={[
          {
            backgroundColor: "#fff",
            image: (
              <View style={styles.imageContainer}>
                <Image
                  source={require("../../assets/onboarding/popcorn1.png")}
                  style={styles.imageStyle}
                />
              </View>
            ),
            title: (
              <View style={styles.titleContainer}>
                <Text style={styles.titleStyle}>Choose A Tasty Dish</Text>
              </View>
            ),
            subtitle: "Done with React Native Onboarding Swiper",
          },
        ]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  imageContainer: {
    marginBottom: 397,
    marginTop: 93,
    marginLeft: 105,
    marginRight: 105,
  },
  imageStyle: {
    borderRadius: 0,
    height: 150,
    width: 150,
    resizeMode: "cover",
  },
  titleContainer: {
    height: 33,
    width: 225,
    position: "absolute",
    left: 0,
    right: 0,
    bottom: 0,
    borderRadius:0,
    justifyContent: "center",
    alignItems: "center",
  },
  titleStyle: {
    fontFamily: "Poppins-Medium",
    fontSize: 22,
    fontWeight: "500",
    lineHeight: 33,
    letterSpacing: 0,
    textAlign: "center",
  },
});
export default OnboardingScreen;

this is my fontLoader.js

// fontLoader.js

import * as Font from "expo-font";

export const loadFonts = async () => {
  await Font.loadAsync({
    "Poppins-Regular": require("../assets/fonts/Poppins/Poppins-Regular.ttf"),
    "Poppins-Medium": require("../assets/fonts/Poppins/Poppins-Medium.ttf"),
    // Add other font variations as needed
  });
};

Please tell me why I am getting this error :

ERROR fontFamily "Poppins-Medium" is not a system font and has not been loaded through Font.loadAsync.