ReferenceError: Can't find variable: useState - React Native

I have been developing a sample mobile application from React native and I keep getting the following error but I cannot seems to put my finger on what's wrong there.

The line does not show any errors and the details in the log do not indicate anything that I should be concern about either. But I keep getting this error.

ReferenceError: Can't find variable: useState

This error is located at:
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in DevAppContainer (at AppContainer.js:121)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

My App.js looks as follows

import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import * as Font from "expo-font";
import AppLoading from "expo-app-loading";
import React, { useState } from "react";

import useFonts from "./hooks/useFonts";
import TravelPartner from "./src/components/mainPage";

const App = () => {
  const [IsReady, SetIsReady] = useState(false);

  const LoadFonts = async () => {
    await useFonts();
  };

  if (!IsReady) {
    return (
      <AppLoading
        startAsync={LoadFonts}
        onFinish={() => SetIsReady(true)}
        onError={() => {}}
      />
    );
  }

  return (
    <View styles={styles.container}>
      {<Text>test run for the application</Text>}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

export default App;

All the libraries have been installed and everything Is up to date.
useFonts.js looks as follows

import * as Font from "expo-font";

export default useFonts = async () => {
  await Font.loadAsync({
    "OtomanopeeOne-Regular": require("../src/assets/fonts/OtomanopeeOne-Regular.ttf"),
    "VeganStylePersonalUse-5Y58": require("../src/assets/fonts/VeganStylePersonalUse-5Y58.ttf"),
    "Festive-Regular": require("../src/assets/fonts/Festive-Regular.ttf"),
    "Pacifico-Regular": require("../src/assets/fonts/Pacifico-Regular.ttf"),
  });
};

This is my package.json:

{
  "main": "index.js",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "start": "react-native start"
  },
  "dependencies": {
    "@react-navigation/native": "^6.0.1",
    "@react-navigation/stack": "^6.0.1",
    "expo": "~42.0.1",
    "expo-app-loading": "^1.1.2",
    "expo-font": "~9.2.1",
    "expo-splash-screen": "~0.11.2",
    "expo-status-bar": "~1.0.4",
    "expo-updates": "~0.8.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "~0.63.4",
    "react-native-elements": "^3.4.2",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-reanimated": "~2.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-unimodules": "~0.14.5",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0"
  },
  "private": true
}

The problem is in your React version. You are using "react": "16.13.1" but hooks are introduced in 16.8 version. Update your React version will solve the problem.

Please run:

npm install react@latest react-dom@latest