Estoy usando TypeScript y necesito crear una ruta con la información del usuario y firmar con google desde firebase (planeo cambiar a Redux como ejercicio más adelante).

Sucede que al escribir el usuario, si está conectado = Usuario, si no es = indefinido, pero el enrutador no tomará un indefinido como hijo ...

 import { createContext, useState } from "react"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import { auth, firebase } from "./services/firebase"; import { Home } from "./pages/Home"; import { NewRoom } from "./pages/NewRoom"; type User = { id: string; name: string; avatar: string; }; type AuthContextType = { user: User | undefined; signInWithGoogle: () => Promise<void>; }; export const AuthContext = createContext({} as AuthContextType); function App() { const [user, setUser] = useState<User>(); async function signInWithGoogle() { // provider is whos giving the log in - google const provider = new firebase.auth.GoogleAuthProvider(); const result = await auth.signInWithPopup(provider); if (result.user) { // username, photoLocation, uniqueID const { displayName, photoURL, uid } = result.user; // what if theres no data? if (!displayName || !photoURL) throw new Error("Missing information from Google Account"); // set user information setUser({ id: uid, name: displayName, avatar: photoURL, }); } } return ( <BrowserRouter> <Routes> <AuthContext.Provider value={{ user, signInWithGoogle }}> <Route path="/" element={<Home />} /> <Route path="/room/new" element={<NewRoom />} /> </AuthContext.Provider> </Routes> </BrowserRouter> ); } export default App;