I'm using TypeScript and I need to create a route with the user info and sign with google from firebase (I plan to switch to Redux as an exercise later).

Happens that when typing the user, if its logged in = User, if its not = undefined, but Router won't take an undefined as a child...

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;