How do I make sure that the user name remains after the page has been updated?

I implemented verification by using passport-jwt in my back-end and then I made post request from client to server:

export const fetchVerifyUser = async (token) => {
  try {
    const response = await axios.post(
      "http://localhost:5000/verify",
      {},
      {
        headers: { Authorization: `Bearer ${token}` },
      }
    );
    console.log(response.data);
    return response.data;
  } catch (error) {
    throw error;
  }
};

When the user login in and the token appears I see all users data in network and in console.log() that I had written inside useEffect()

const Header = () => {
  const [anchorEl, setAnchorEl] = useState(null);
  const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = useState(null);
  const isMenuOpen = Boolean(anchorEl);
  const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
  const navigate = useNavigate();
  const token = localStorage.getItem("token");
  const dispatch = useDispatch();
  const profile = useSelector((state) => state.auth.user);

  useEffect(() => {
    if (token) {
      fetchVerifyUser(token);
      console.log(profile.user);
    }
  }, [token, profile.user]);

// ...other logic of the component
   return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar
        position="static"
        sx={{ backgroundColor: "rgb(31, 37, 61)" }}
        color="default"
      >
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="open drawer"
            sx={{ mr: 2 }}
          >
            <MenuIcon sx={{ color: "white" }} />
          </IconButton>
          <Typography
            variant="h6"
            noWrap
            component="div"
            sx={{ display: { xs: "none", sm: "block" }, color: "white" }}
          >
            Cryptocurrency Dashboard
          </Typography>
          <Box sx={{ flexGrow: 1 }} />
          <Box
            sx={{
              display: {
                xs: "none",
                md: "flex",
                alignItems: "center",
              },
            }}
          >
            <IconButton size="large" sx={{ color: "white" }}>
              <Badge color="white">
                <DashboardIcon />
              </Badge>
            </IconButton>
            <IconButton size="large" sx={{ color: "white" }}>
              <Badge color="white">
                <InfoIcon />
              </Badge>
            </IconButton>
            {token && (
              <IconButton size="large" sx={{ color: "white" }}>
                <Badge color="white">
                  <Tooltip title={profile.user?.user}>
                    <PersonIcon />
                  </Tooltip>
                </Badge>
              </IconButton>
            )}
            {!token && <ButtonSignIn />}
            {token && <ButtonExit onClick={() => handleClickExit()} />}
          </Box>
          <Box sx={{ display: { xs: "flex", md: "none" }, color: "white" }}>
            <IconButton
              size="large"
              aria-label="show more"
              aria-controls={mobileMenuId}
              aria-haspopup="true"
              onClick={handleMobileMenuOpen}
              color="white"
            >
              <MoreIcon sx={{ color: "white" }} />
            </IconButton>
          </Box>
        </Toolbar>
      </AppBar>
      {renderMobileMenu}
      {renderMenu}
    </Box>
  );

Earlier, I had tried to render the user’s name inside a ToolTip, but when I refreshed the page, the user’s name inside the ToolTip disappeared. That’s why I decided to use Passport middleware. How can I connect my verification using passport-jwt and render the user’s name even after refreshing the page? Thanks.