Typescript Context API returning "undefined"

I've been getting an undefined in SideBar.tsx when I try to console.log(user_data.user?.id). The purpose is to return the authenticated user data to show SideBar component.

Am I missing something? I tried to copy in the tutorial, but it didn't work for me.

User types, User.tsx

// User Types
export type User = {
    id: number;
    nome: string;
    apelido: string;
    nome_usuario: string;
    palavra_passe?: string
    email: string;
    contacto: string;
}

AuthContext.tsx

import { createContext } from "react";
import { User } from "../../types/User.";

export type AuthContextType = {
    user: User | null;
    signin: (email: string, palavra_passe: string) => Promise<boolean>;
    signout: () => void;
}

export const AuthContext = createContext<AuthContextType>(null!);

AuthProvider.tsx

import { useState } from 'react';
import { useApi } from '../../hooks/useAPI';
import { User } from '../../types/User.';
import { AuthContext } from './AuthContext';

export const AuthProvider = ({ children } : { children: JSX.Element }) => {
    const [user, setUser] = useState<User | null>(null);
    const api = useApi();

    const signin = async (email: string, palavra_passe: string) => {
        const data = await api.signin(email, palavra_passe);
        if(data.userData && data.token) {
            setUser(data.userData);
            return true;
        }
        return false;
    }

    const signout = async () =>{
        await api.logout();
        setUser(null);
    }

    return(
        <AuthContext.Provider value={{ user, signin, signout }}>
            {children}
        </AuthContext.Provider>  
    );
}

SideBar.tsx

import { AuthContext } from '../../Context/Auth/AuthContext';

const Sidebar = () => {
    const user_data = useContext(AuthContext);
    
    console.log(user_data.user?.id)

    return (
        <div className="sidebar-container">
            <h1>Side Bar</h1>
        </div>
    );
}

export default Sidebar;