React native error: JSX element type 'AppLoading' does not have any construct or call signatures?

I am coding an react native app, and I am trying to import some custom fonts in the app. But, when the font is loading, I want to display the expo's loading screen or AppLoading Component and when I insert the component in the render tree it gives me this error: JSX element type 'AppLoading' does not have any construct or call signatures.

Code:

// Importing packages
import { StyleSheet, View } from "react-native";
import React, { useState } from "react";
import redux, { createStore } from "redux";
import { Provider } from "react-redux";
import reducers from "./redux/index";
import AppLoading from "expo";
import Router from "./Router";
import loadFonts from "./fonts";

// App component
const App:React.FC = () => {
  // Redux store
  const store: redux.Store = createStore(reducers);

  // State
  let [loaded, setLoaded] = useState(false);

  if (loaded) {
    // Render app
    return (
      <React.StrictMode>
        <Provider store={store}>
          <View style={styles.container}>
            {/* Router */}
            <Router />
          </View>
        </Provider>
      </React.StrictMode>
    );
  } else {
    return (
      <AppLoading startAsync={loadFonts} onFinish={() => setLoaded(true)} />
    );
  }
};

// Export app
export default App;

I have no idea how this error works please note that I have just came from reactjs so I might make some silly mistakes.

Thanks!