Why is my logout button not linking to my home route

Question

I am building a small react/redux app and currently have the login component as my "/" route. The user experience right not currently only involves logging in, then having the ability to logout. I have a an onclick event on my blue logout button with a function that uses the navigate object to route back to this login page. For whatever reason neither the url nor the components change and I cant think why

Nav.js where my logout button lives

import React, { useEffect } from "react";
import { Routes, Route, Link, useNavigate } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { Card, Button, Accordion, Dropdown, Nav } from "react-bootstrap";
import { logOutUser } from "../features/loggedInSlice";

export default function NavBar() {
  const state = useSelector((state) => state);
  const dispatch = useDispatch();
let navigate = useNavigate();
console.log(state);



  function logOut() {
    navigate("/");
  }

  const loggedInFirstName = state.loggedIn.authUser.firstName;

  return (
    <div style={{ display: "flex" }}>
      <Nav justify variant="tabs" defaultActiveKey="/home">
        <Nav.Item>
          <Nav.Link>Home</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link>New Poll </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link>Leaderboard</Nav.Link>
        </Nav.Item>
      </Nav>
      <h5 style={{ paddingLeft: "15px", paddingTop: "15px" }}>
        Welcome {loggedInFirstName}
      </h5>
      <Button onClick={logOut} style={{ marginLeft: "5%" }}>
        Logout
      </Button>
    </div>
  );
}

UserLogin.Js

import React from "react";
import { Routes, Route, Link, useNavigate } from "react-router-dom";
import { useState, useEffect } from "react";
import { Card, Button, Accordion, Dropdown } from "react-bootstrap";
import { useSelector, useDispatch } from "react-redux";
import "bootstrap/dist/css/bootstrap.min.css";
import { setLoggedInUser } from "../features/loggedInSlice";
import { loginUser } from "../features/loggedInSlice";

export default function UserLogin() {
  let navigate = useNavigate();
  const users = useSelector((state) => state.users);
  const state = useSelector((state) => state);
  const dispatch = useDispatch();
  const [user, setUser] = useState("Select A User");
  const [authorizedUser, setauthorizedUser] = useState({});
  const handleSelect = (e) => {
    setUser(e.target.text);
  };

  function authorizeUser() {
    setauthorizedUser(
      users.filter((userName) => userName.firstName === user)[0]
    );
  }

  useEffect(() => {
    dispatch(setLoggedInUser(authorizedUser));

    return () => {
      navigate("main");
    };
  }, [authorizedUser]);

  function authorizeLogin() {
    console.log(state);
  }

  console.log(state);

  return (
    <div>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Card style={{ width: "50%" }}>
          <Card.Header>Would you Rather?</Card.Header>
          <Card.Body>
            <Card.Title>Special title treatment</Card.Title>
            <Card.Text>
              With supporting text below as a natural lead-in to additional
              content.
            </Card.Text>
          </Card.Body>
          <Dropdown className="d-inline mx-2" onClick={handleSelect}>
            <Dropdown.Toggle
              id="dropdown-autoclose-true"
              style={{ width: "60%" }}
            >
              {user}
            </Dropdown.Toggle>

            <Dropdown.Menu style={{ width: "60%" }}>
              {users.map((user, index) => (
                <Dropdown.Item href="#" key={index}>
                  {user.firstName}
                </Dropdown.Item>
              ))}
            </Dropdown.Menu>
          </Dropdown>
          <div>
            <Button
              variant="success"
              style={{ width: "20%", marginTop: "3%", marginBottom: "1%" }}
              onClick={authorizeUser}
            >
              Login
            </Button>
          </div>
        </Card>

        <button onClick={authorizeLogin}>click</button>
      </div>
    </div>
  );
}

Here is a codesandbox where you can test the issue :

https://codesandbox.io/s/naughty-smoke-jrq3dz