Estado de usuario esta em outro componente

Olá Samuel!

Você pode tentar Criar um Contexto para o Usuário:

import React, { createContext, useState } from 'react';

export const UsuarioContext = createContext();

export const UsuarioProvider = ({ children }) => {
    const [usuarios, setUsuarios] = useState([]);

    return (
        <UsuarioContext.Provider value={{ usuarios, setUsuarios }}>
            {children}
        </UsuarioContext.Provider>
    );
};

No seu arquivo principal, onde você renderiza o AppRoustes, envolva-o com o UsuarioProvider.

import React from 'react';
import ReactDOM from 'react-dom';
import AppRoustes from './routes';
import { UsuarioProvider } from './UsuarioContext';

ReactDOM.render(
    <UsuarioProvider>
        <AppRoustes />
    </UsuarioProvider>,
    document.getElementById('root')
);

E por fim, no componente Home, utilize o contexto para gerenciar o estado dos usuários.

import React, { useContext } from 'react';
import ImgPrincipal from '../../componentes/ImgPrincipal';
import Formulario from '../../componentes/Formulario';
import { UsuarioContext } from './UsuarioContext';

const Home = () => {
    const { usuarios, setUsuarios } = useContext(UsuarioContext);

    const aoNovoUsuarioAdicionado = (usuario) => {
        console.log(usuario);
        setUsuarios([...usuarios, usuario]);
    };

    return (
        <div className="App container">
            <ImgPrincipal />
            <div>
                <Formulario aoUsuarioCadastrado={usuario => aoNovoUsuarioAdicionado(usuario)} />
            </div>
        </div>
    );
};

export default Home;

No componente routes.js, você pode acessar o estado dos usuários da mesma forma:

import React, { useContext } from 'react';
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./Pages/Home";
import Sobre from "./Pages/Sobre";
import { UsuarioContext } from './UsuarioContext';

const AppRoustes = () => {
    const { usuarios } = useContext(UsuarioContext);

    const times = [
        {
            nome: 'Usuarios Cadastrados',
            corPrimaria: '#D9F7E9',
            corSecundaria: '#57C278'
        }
    ];

    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route 
                    path="/Sobre" 
                    element={
                        times.map(time => (
                            <Sobre 
                                key={time.nome} 
                                nome={time.nome} 
                                corPrimaria={time.corPrimaria} 
                                corSecundaria={time.corSecundaria} 
                                usuarios={usuarios}
                            />
                        ))
                    }
                />
            </Routes>
        </BrowserRouter>
    );
};

export default AppRoustes;

Se tudo deu certo , o estado de usuarios estará disponível para todos os componentes que estão dentro do UsuarioProvider, permitindo que você compartilhe e gerencie o estado de forma eficiente.

Mas de toda forma são apenas sugestões, e como eu não tenho acesso total ao seu projeto, peço que você compartilhe o link do seu projeto no GitHub ou uma pasta com todos os arquivos que você utilizou no através do Google Drive. Dessa forma, conseguirei realizar os testes necessários e te ajudar de forma mais assertiva.

Lembre-se que, se enviar os arquivos por meio do Google Drive, é necessário conceder permissão para que eu possa ter acesso.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Oi Victor, vou te passar o link do projeto https://github.com/SamuelGranados/formulariomaga fiz, porem, esta aparecendo outros erro, se voce me ajudar ficarei muito grato.

Mano consegui solucionar, agradeço muito obrigado!