React-Native Expo-Go app: ‘Not a valid React component’ error

I am trying to develop my first proper React-Native app and I’m having trouble straight out the gate. I am trying to use a few different imported Navigation libraries (BottomTabNavigator, NativeStackNavigator, Stack.Screen, etc.).

I am getting an error when I run the app on Expo-Go saying something like “Error: Got an invalid value for ‘component’ prop for the screen ‘ManageExpense’. It must be a valid React Component.”
So far a I have App.js, and 3 screens, AllExpenses.js, ManageExpense.js, and RecentExpenses.js.
I’ll post them in that order below.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

//importing custom components
import ManageExpense from './screens/ManageExpense';
import RecentExpenses from './screens/RecentExpenses';
import AllExpenses from './screens/AllExpenses';

const Stack = createNativeStackNavigator();// this stack will create an object that gives access to 2 components (nav, register screens): https://reactnavigation.org/docs/native-stack-navigator
const BottomTabs = createBottomTabNavigator(); // allows bottom tab navigation: npm install @react-navigation/bottom-tabs

//this function handles the bottom tab navigator
function ExpensesOverview() {
  return (
    <BottomTabs.Navigator>
      <BottomTabs.Screen name="RecentExpenses" component={RecentExpenses} />
      <BottomTabs.Screen name="AllExpenses" component={AllExpenses} />
    </BottomTabs.Navigator>
  );
}

export default function App() {
  return (
    <>
      <StatusBar style="auto" />
      {/* setting up navigation */}
      <NavigationContainer>
        {/* StackNavigator allows me to dynamically load the tabs options based on which screen is selected*/}
        <Stack.Navigator>
          {/* below uses the custom function above to display both options in one stack.screen */}
          <Stack.Screen name="ExpensesOverview" component={ExpensesOverview} />
          <Stack.Screen name="ManageExpense" component={ManageExpense} />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
}

import React from 'react';
import { Text } from 'react-native';

export default function AllExpenses() {

    return <Text>AllExpenses Screen</Text>

}

import React from 'react';
import { Text } from 'react-native';

export default function ManageExpense() {

    return <Text>ManageExpense Screen</Text>

}

import React from 'react';
import { Text } from 'react-native';

export default function RecentExpenses() {

    return <Text>RecentExpenses Screen</Text>

}

I’m trying to get the imported navigation components to work properly. I really can’t spot where I’m going wrong I’ve been looking at it for a while and even ChatGPT can’t seem to spot it… Any help would be appreciated. Thanks.