[Dúvida] React Sistema de Login

Boa noite.. Eu não consigo imprimir o nome do usuário quando ele se loga na página Teria que aparecer o nome do usuário que está logado no menu do projeto. Aqui vai o código...

pasta do projeto projeto-restaurante

pasta frontend

pasta src pasta components

pasta Admin

pasta Login

login.js

import React, { useState, useRef } from "react";
import axios from "axios";
import { toast, ToastContainer } from "react-toastify";
import { Link, useNavigate } from "react-router-dom";
import { setToken } from "./Auth.js";

  const Login = () => {
    const [usuario, setUsuario] = useState("");
    const [senha, setSenha] = useState("");
    
    const [error, setError] = useState("");
    const navigate = useNavigate();
    
    const ref = useRef();
        
    const login = (e) => {
        e.preventDefault();
        axios.post("http://localhost:8800/login",{
            usuario: usuario,
            senha: senha,
        })
        .then(res => {
            console.log(res);
            if(!user.usuario.value) {
                return toast.warn("Digite o usuário!");
            } else if(!user.senha.value) {
                return toast.warn("Digite a senha!");
            } else if(res.data.Status === 'Success') {
                console.log(res.data.Token);
                setToken(res.data.Token)
                    navigate('/');
            } else {
                setError(res.data.Error);
            }
        })
        .then(({ data }) => toast.success(data))
        .catch(({ data }) => toast.error(data));
    
        const user = ref.current;
  }
  
  return (
    <>
      <div className="login template d-flex justify-content-center align-items-center vh-100 background">
        <div className="form_container p-5 rounded bg-white">
           <form ref={ref}>
             <h3 className="text-center">Login</h3>
             <div className="mb-2">
             <h1 style={{color: 'red', fontSize: '15px', textAlign: 'center', marginTop: '20px'}}>{error && error}</h1>
               <label htmlFor="user">Usuário</label>
                <input type="text" placeholder="Digite Usuário" onChange={(e) => {setUsuario(e.target.value)}} className="form-control" name="usuario" />
             </div>
              <div className="mb-2">
                <label htmlFor="password">Senha</label>
                <input type="password" placeholder="Digite a senha" onChange={(e) => {setSenha(e.target.value)}} className="form-control" name="senha" />
              </div>
              <div className="mb-2">
                <input type="Checkbox" className="custom-control custom-Checkbox" id="check" />
                <label htmlFor="check" className="cutom-input-label ms-2">
                  Lembre-se 
                </label>
              </div>
              <div className="d-grid">
                <button className="btn btn-primary" type="button" onClick={login}>Logar</button>
              </div>
              <p>
                 Esqueceu a senha <a href="">Senha ?</a><Link to="/cadusuario" className="ms-2">Cadastre-se</Link>
              </p>
           </form>
        </div>
      </div>
      <ToastContainer autoClose={3000} position={toast.POSITION.BUTTON_LEFT} />
    </>
  )
}

export default Login;

pasta menu

menu.js

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import React, { useEffect, useState } from "react";
import { Link, Outlet, useNavigate } from "react-router-dom";
import axios from "axios";
import { fetchToken } from "../Login/Auth.js";

const Menu = () => {  
  const navigate = useNavigate();
  const signOut = () => {
      localStorage.removeItem('Token');
      navigate('/login');
  }
  
  const api = axios.create({
    baseURL: "http://localhost:8800/cadusuario",
  });
  
  const [usuario, setUsuario] = useState([]);

  useEffect(() => {
    api
      .get("http://localhost:8800/cadusuario")
      .then((response) => setUsuario(response.data))
      .catch((err) => {
        console.error("ops! ocorreu um erro" + err);
      });
  }, []);
  
  return(
    <>
      <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <div className="container-fluid">
            <Link to="/" className="nav-link">Home</Link>
            <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse" id="navbarSupportedContent">
                <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                    <li className="nav-item">
                        <Link to="/listaProduto" className="nav-link">Produtos</Link>
                    </li>
                    <li className="nav-item">
                        <Link to="/clientes" className="nav-link">Clientes</Link>
                    </li>
                    <li className="nav-item">
                        <Link to="/login" className="nav-link" onClick={signOut}>Desolgar</Link>
                    </li>
                </ul>
                {usuario.map((item, i) => (
                    <div key={i} className="d-flex"> 
                        {item.usuario}
                    </div>
                ))}
            </div>
          </div>
        </nav>
        <Outlet />
    </>
  )
}

export default Menu;

Aguardo resposta abs...