I'm trying to make a logOut function with firebase on React. I have the following code for the logOut function:

const [error, setError] = useState('');
    const { currentUser, logout } = useAuth();

    const handleLogout = async () => {
        try {
            await logout();
        } catch (error) {
            setError('Server error');
        }
    }

I'm calling that code on a Link because it is in a navBar:

<Link className="nav-link" to="/iniciosesion" onClick={handleLogout}>LogOut</Link>

I'm importing useAuth like this:

import { useAuth } from '../context/AuthContext';

And this is what I have in my AuthContext.js:

import React, { createContext, useEffect, useState, useContext } from 'react'
import { auth } from '../firebase' 

const AuthContext = createContext();
export const useAuth = () => useContext(AuthContext);
export const AuthProvider = (props) => {

    const [currentUser, setCurrentUser] = useState({});

    useEffect(() => {
        auth.onAuthStateChanged((user) => {
            setCurrentUser(user);
        })
    }, [])

    const logout = () => auth.signOut();
    const value = { logout, currentUser };

    return (
        <AuthContext.Provider value={value}>
            {props.children}
        </AuthContext.Provider>
    )
}

I have searched up and I can't find a solution for this problem.