My react app is always loading when in run dev – Reactjs

Layout.jsx file

import { Outlet } from "react-router-dom";
    import Topbar from "../../components/Topbar";
    // import Sidebar from "../../components/Sidebar";
     // import { Box, useMediaQuery } from "@mui/material";

const Layout = () => {
    
    return (
        <>
            <Topbar />
                Hello Layout
            <Outlet />
        </>
        
    )
   
}

export default Layout

import React from 'react';
import { typography
         } from '@mui/system';

import {NotificationsOutlinedIcon,
        MenuOutlinedIcon    } from '@mui/icons-material';
import FlexBetween from './Boxes';

const Topbar = () => {
    return (
        <>
        <NavBar sx={{
               display: "flex",
               justifyContent: "space-around",
               alignItems: "center",
               height:" 50px",
               width: "100%",
               boxShadow: "none",
               position:"static" 
        }}>

            <MenuOutlinedIcon />

            <h2>Performance Target and Accomplishment</h2>

            <FlexBetween>
                <NotificationsOutlinedIcon />

            </FlexBetween>
        </NavBar>
        </> 
    );
}

export default Topbar

App.jsx

import { RouterProvider } from 'react-router-dom';
import router from './router';
import './App.css';

function App() {
  

  return (
    <>
      <RouterProvider router={router} />
    </>
  )
}

export default App

Router.jsx

   import {createBrowserRouter} from "react-router-dom";
import React from "react";
import Login from "./views/login/Login";
import Dashboard from "./views/dashboard/Index";
import Layout from "./views/layout/Index";
import Particulars from "./views/particulars/Index";


const router = createBrowserRouter([
    {
        path:'/',
        element: <Login />
    },
    {
        path:'/', 
        element: <Layout />,
        children: [
            {
                path:'/Dashboard',
                element: <Dashboard />
            },
            {
                path:'/Particulars',
                element: <Particulars />
            }
        ]
    }  
])
export default router;

Hi everyone, I am new and challenged to build a web using react and I have this problem that has been messing with my development or maybe me or the dependencies. I don’t know much really well about the react. When I start run dev, yet the website continuously loads and it seems that it will also break down my visual studio terminal.

Every time I import the topbar to my layout file causes the problem but I don’t know how to solve it since it’s not throwing an error that may give a hint.

I tried searching online but I can’t find the right answer and was expecting if a well versed developer in react can give me a hint and fix this unknown error for me.