How to display a component when certain conditions are true in ReactJS?

What I want to achieve

display components based on user authority admin/!admin

//Everyone can see this login/register/reset

//Admin x paths

//regular users y paths

I have been having issues finding tutorials that explain properly step by step what I want to achieve I want to have an admin that has access to a different view than the other users, however the only video I found is not only outdated but in vue (Firebase Auth Tutorial) and not in react and I wasn't able to "translate" the code at some point to react so I got stuck it was about Custom Claims (is like 4 videos, there are more but the ones that explain the auth stuff was 17-21) I try to understand it but it was too complex for me also try to get into Firebase Security to try and see if I could do the admin thing but unsuccessful with that as well however someone mention well then what if you just simply add a value "isAdmin" in your firebase and set it up to true to w/e is gonna be admin and then anyone else when they register is false well that sounds simple.

Basically I want this view (Only this) for the admin which basically they can see all users orders with details:

While users can create/edit/delete "students" (their kids basically) and they can also create and view/edit/delete their own orders

FULL CODE, based on sugestion For some reason I can't do ANYTHING after trying this so I'm open to other suggestions

import React, { useEffect, useState } from "react";
import "./App.css";
import Register from "./Register";
import { auth, db } from "./firebase";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
import Login from "./Login.js";
import Inicio from "./Inicio";
import Reset from "./Reset";
import CrearEstudiante from "./CrearEstudiante";
import Estudiantes from "./ListadoEstudiantes"
import Pedidos from "./ListadoPedidos"
import CrearPedidos from "./CrearPedidos";
import AgregarLibro from "./AgregarLibro";
import AgregarAIB from "./AgregarAIB";
import AgregarOpcionales from "./AgregarOpcionales";
import Comprar from "./Comprar";
import VerPedidos from "./VerPedidos";
import UpdateProfile from "./UpdateProfile";
import EditForm from "./EditForm";
import DBLibros from "./DBLibros";
import DBDiccionarios from "./DBDiccionarios";
import DBLocal from "./DBLocal";

function App() {

  const [user, setUser] = useState([]);
  const [isAdmin, setIsAdmin] = useState(false);

  useEffect(() => {
    auth.onAuthStateChanged((authUser) => {

      if (authUser) {
        setUser(authUser);
      } else {
        setUser(false);
      }
    })
  }, [user])

  useEffect(() => {
    const userDoc = db.collection('usuarios').doc(user.uid);
    userDoc.get().then(doc => {
        if (doc.exists) {
            const tempData = [];
            const data = doc.data();
            tempData.push(data);
            setIsAdmin(tempData[0].isAdmin)
        }
      });
 }, [user])

 useEffect(() => {
  if(isAdmin === true){
    console.log("I'm an admin")
    console.log(isAdmin)
    console.log(user.uid)
  }
  else {
    console.log("No admin")
    console.log(isAdmin)
    console.log(user.uid)
  }
 }, [isAdmin])

  return (
    < div className="app" >
        <Router>
        <Switch>

        {isAdmin && (
            <>
          <Route path = "/Agregar_Libros">
            <Inicio user={user}/>
            <AgregarLibro />
          </Route>

          <Route path = "/Agregar_AIB">
            <Inicio user={user}/>
            <AgregarAIB />
          </Route>

          <Route path = "/Agregar_Opcional">
            <Inicio user={user}/>
            <AgregarOpcionales />
          </Route>

          <Route path = "/DB_Libros">
            <Inicio user={user}/>
            <DBLibros />
          </Route>

          <Route path = "/DB_Diccionarios">
            <Inicio user={user}/>
            <DBDiccionarios />
          </Route>

          <Route path = "/DB_Local">
            <Inicio user={user}/>
            <DBLocal />
          </Route>
          </>
          )}
          
          {!isAdmin && (
            <>
          <Route path = "/Inicio">
            <Inicio user={user}/>
            <Estudiantes user={user} />
            <Pedidos user={user} />
          </Route>

          <Route path = "/Profile">
            <Inicio user={user}/>
            <UpdateProfile user={user}/>
          </Route>

          <Route path = "/Editar_Estudiante">
            <Inicio user={user}/>
            <EditForm user={user}/>
          </Route>

          <Route path = "/Crear_Estudiante">
            <Inicio user={user}/>
            <CrearEstudiante user={user}/>
          </Route>

          <Route path = "/Crear_Pedidos">
            <Inicio user={user}/>
            <CrearPedidos user={user}/>
          </Route>
          
          <Route path = "/Comprar">
            <Inicio user={user}/>
            <Comprar user={user}/>
          </Route>

          <Route path = "/Ver_Pedidos">
            <Inicio user={user}/>
            <VerPedidos user={user}/>
          </Route>
          </>
          )}
          
          <Route path = "/Register">
            <Register/>
          </Route>

          <Route path = "/Reset">
            <Reset />
          </Route>

          <Route path = "/">
            <Login/>
          </Route>

        </Switch>
        </Router>
      </div >
  );
}
export default App;

When I have it like this I can't see the Register, Reset or Login ( in this case Path = "/") it pretty much depends in the order in which I have set up the routes which is weird.

from How to display a component when certain conditions are true in ReactJS?