The default export is not a React Component in page: "/" NextJS

Question

Not sure why the error is coming up, heres my index.js and App.js (the default export). I have used export default in the app.js.

index.js:

import "./index.css";
import App from "./App";
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.css";
<App />;

App.js

import React, { Component } from "react";
import { ToastContainer } from "react-toastify";
import NavBar from "../components/navBar";
import auth from "../services/authService";
import "react-toastify/dist/ReactToastify.css";
import "./App.css";

class App extends Component {
  state = {};

  componentDidMount() {
    const user = auth.getCurrentUser();
    this.setState({ user });
  }

  render() {
    const { user } = this.state;

    return (
      <React.Fragment>
        <ToastContainer />
        <NavBar user={user} />
      </React.Fragment>
    );
  }
}

export default App;

Answer 1

Fixed, made index.js a class and exported it.

import React, { Component } from "react";
import "./index.css";
import App from "./App";
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.css";
class Index extends Component {
  state = {};
  render() {
    return <App />;
  }
}

export default Index;