Why JSX file doesn't appear in browser?

I try to build e-commerce app using reactjs and i got a problem on frontend, the page is not showing in browser. This page is for admin page that can do CRUD on product.

here is Admin.jsx code

import React, { useState } from 'react';

function Admin() {
  const [products, setProducts] = useState([]);
  const [newProduct, setNewProduct] = useState('');

  const handleAddProduct = () => {
    if (newProduct !== '') {
      setProducts([...products, newProduct]);
      setNewProduct('');
    }
  };

  const handleDeleteProduct = (index) => {
    const updatedProducts = [...products];
    updatedProducts.splice(index, 1);
    setProducts(updatedProducts);
  };

  return (
    <div>
      <h2>Admin Page</h2>

      <h3>Add Product</h3>
      <input
        type="text"
        value={newProduct}
        onChange={(e) => setNewProduct(e.target.value)}
      />
      <button onClick={handleAddProduct}>Add</button>

      <h3>Product List</h3>
      <ul>
        {products.map((product, index) => (
          <li key={index}>
            {product}
            <button onClick={() => handleDeleteProduct(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Admin;

and here is the main app

import React from 'react';
import './App.css';
import {BrowserRouter, Routes, Route} from 'react-router-dom';
import Layout from './components/Layout';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import Wishlist from './components/Wishlist';
import Login from './pages/Login';
import Register from './pages/Register';
import SingleProduct from './pages/SingleProduct';
import Cart from './components/Cart';
import Admin from './pages/Admin';


function App() {
  return (
    <>
    <BrowserRouter>
    <Routes>
    <Route path="/" element={<Layout />}>
            <Route index element={<Home />} />
            <Route path="about-us" element={<About />} />
            <Route path="contact" element={<Contact />} />
            <Route path="wishlist" element={<Wishlist />} />
            <Route path="login" element={<Login />} />
            <Route path="register" element={<Register />} />
            <Route path="product/:id" element={<SingleProduct />} />            
            <Route path="cart" component={<Cart />} />
            <Route path="admin" component={<Admin />} />
          </Route>
    </Routes>
    </BrowserRouter>
    </>
  );
}

export default App;

File placements is already correct but is's still not showing on my browser.
Any help would be appreciated. Thank you

I'm pretty sure it's because you have component={<Admin />} when it should be element={<Admin />} like all the rest (except cart which I suspect also doesn't work)

Remove the path from Parent Layout Route. Update this part of your code:-

<Route element={<Layout />}>