Showing blank page after npm start, the browser did not show any error message

Showing blank page after npm start, the browser did not show any error message.

import {
  createBrowserRouter,
  RouterProvider,
  Route,
  Outlet,
} from "react-router-dom";
import './App.css';
import * as React from "react";
import Register from "./pages/Register"
import Login from "./pages/login"
import Write from "./pages/Write"
import Home from "./pages/home"
import Single from "./pages/single"
import Footer from './components/Footer';
import Navbar from './components/navbar';
import "./project.scss"

const main = () => {
  return (
    <div>
      <Navbar />
      <Outlet />
      <Footer />
    </div>
  )
};

const router = createBrowserRouter([
  {
    path: "/",
    element: <main />,
    children: [
      {
        path: "/",
        element: <Home />,
      },
      {
        path: "/post/:id",
        element: <Single />,
      },
      {
        path: "/write",
        element: <Write />,
      },
    ],
  },
  {
    path: "/register",
    element: <Register />,
  },
  {
    path: "/login",
    element: <Login />,
  },

])

function App() {
  return (
    <div className="app">
      <div className='container'>
        <RouterProvider router={router} />
      </div>
    </div>
  );
}

export default App;

Also I get this warning message in the VS Code:

WARNING in [eslint]
srcApp.js
  Line 4:3:   'Route' is defined but never used          no-unused-vars
  Line 21:7:  'main' is assigned a value but never used  no-unused-vars

I am also get lost on this. How the main is not used?

I have tried multiple solutions that I have found but none of them have worked yet. I know it is the path issue, but don’t know how to get it working. I want to keep the children elements.