Is There a Way to Fix Ionicons Not Showing Using Expo SDK 49

Question

I was just programming accordingly to a trustable video and seeing how to use Ionicons in a BottomTabNavigator. I did exactly what he did, and in the video, the icons worked, and in mine they don't. The problem is that I am trying to create a Bottom Tab Navigator with 4 options in it: Map, Settings, Messaging, and Profile. I am using Ionicons in @expo/vector-icons library as the icons for the Bottom Tab Navigator. But the icons are not showing at all; it seems like they are not being rendered. I can touch the "non-existent" icons and still go to the pages, and it works fine, except the images. My Expo SDK is version 49.0.23 and I am using @expo/vector-icons version 13.0.0. Here is my code for the Tab Navigator and Images:

import {Image} from 'react-native'
import React from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import SettingScreen from "./SettingsScreen"
import MessagingScreen from './MessagingScreen'
import Profile from './Profile'
import MapScreen from './MapScreen'
import {Ionicons} from "@expo/vector-icons"
import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';

const Tab = createBottomTabNavigator();
const tabBarStyle = {
  padding:20,
  borderRadius:20,
  height:80,
  position:"absolute",
  bottom:20,
  left:20,
  right:20,
}
export function BottomTabNavigation(){
  return (
    <Tab.Navigator
    initialRouteName="Map"
    activeColor="orange"
    tabBarHideKeyBoard={true}
    headerShown={false}
    inactiveColor="#D5D5DA"
    barStyle={{paddingBottom: 48}}
    screenOptions={({route, }) => ({
        tabBarIcon:({image, focused}) => {
          if (route.name === "Map"){
            image = focused ? require("./map.png"):require("./map.png") 
          }
        }
    })}
    >
      <Tab.Screen name="MapScreen" component={MapScreen} options={{
        tabBarStyle:tabBarStyle,
        tabBarShowLabel:false,
        headerShown:false,
        tabBarIcon: ({focused, color, size}) => {
        <Ionicons 
        name={focused ? "map-outline": "map-outline"}
        color={focused ? "orange":"gray"}
        size={26}
        />}
      }}/>
      {/* <Image source={require("settingsicon.png")}/> */}
            <Tab.Screen name="Messaging" component={MessagingScreen} options={{
        tabBarStyle:tabBarStyle,
        tabBarShowLabel:false,
        // paddingBottom,
        headerShown:true,
        tabBarIcon: ({focused}) => {
        <Ionicons 
        name={focused ? "chatbubble-ellipses": "chatbubble-ellipses"}
        color={focused ? "orange":"gray"}
        size={26}
        />

      }
      }}/>
            <Tab.Screen name="Settings" component={SettingScreen} options={{
        tabBarStyle:tabBarStyle,
        tabBarShowLabel:false,
        headerShown:true,
        tabBarIcon: ({focused}) => {
        <Ionicons 
        name={focused ? "chatbubble-ellipses": "chatbubble-outline"}
        color={focused ? "orange":"gray"}
        size={26}
        />}
        // <MaterialIcon name="settings" size={25} color={"red"} />
        // tabBarIcon: <Image source={require("settingsicon.png")}/>
            }}/>
            <Tab.Screen name="Profile" component={Profile} options={{
        tabBarStyle:tabBarStyle,
        tabBarShowLabel:false,
        headerShown:true,
        tabBarIcon: ({focused}) => {
        <Ionicons 
        name={focused ? "person": "person-outline"}
        color={focused ? "orange":"gray"}
        size={26}
        />}
      }}/>
    </Tab.Navigator>
  )
}

export default BottomTabNavigation

I tried:

• Uninstalling @expo/vector-icons and reinstalling it. Nothing happened there.
• Changing my code according to the instructions on other Stack Overflow Threads. They still didn't pop up.
• Using AI to help me a bit. Again, didn't work. Also, I tried using different phones and images, but whenever I try to use downloaded images, VS Code says there is an error. Another potential solution was clearing the expo cache, but it didn't change matters at all. Here is an image of what is happening:

Even though the tab is rendering correctly, and in those circles are supposed to be where the icons are (they still have a touch event though), but they show up

I am expecting that the where I have circled in the image are icons, not just a blank navigator. Thank you.