Why can't I go back to the authentication function after I pressed the logout button

Question

This is what I think I am having a problem with this code, but if this is vague please let me explain furthermore to you.

import { database } from "../config/firebase";
import { signOut } from "firebase/auth";
import { useNavigate } from "react-router-dom";

    //User log out
    const history = useNavigate();

    function logOut() {
      signOut(database).then(val => {
        history('/');
      });
    }

          <div className= 'logoutButton'>
            <button onClick={logOut}>Logout</button>
          </div>

For Authentication function-----

import { auth } from "../config/firebase";
import { createUserWithEmailAndPassword } from "firebase/auth";
import { useState } from "react";
import './auth.css';
import { FaUser } from "react-icons/fa";
import { FiLock } from "react-icons/fi";
import { useNavigate } from "react-router-dom";


export const Auth = () => {
    
    const [email, setEmail] =  useState("");
    const [password, setPassword] =  useState("");
    const history = useNavigate();

    const Login = async () => {
        try{
            await createUserWithEmailAndPassword(auth, email, password).then(data => {
                history('/dashboard'); 
            })
        } catch (err){
            console.error(err);
        }
    };

    return( 
<div className= "loginButton-container">
<button onClick={Login} className= "loginButton">Login</button>
</div>

I tried this code but after I pressed the logout button it didnt go back to the authentication function