React routing seems to work but it doesn't render the page

Question

when I click on the button the URL changes and it prints 'user exists' in the console, but the page is blank and doesn't show the component. I have been trying to figure out the problem for 2 days now but I can't seem to find a solution and hopefully someone here can help. This is the code:

import { Fragment, useState } from "react";
import { Route, Link, useHistory } from "react-router-dom";
import LoggedUser from "../pages/LoggedUser";

const ExitingUserButton = () => {
    const [existingUser, setExistingUser] = useState(false);
    let history = useHistory();

    const loginHandler = () => {
        setExistingUser(true);
        console.log('user exists');
        history.push('/logged-user');
    };

    return (
        <Fragment>
            {!existingUser ?
                <Link type='Link' onClick={loginHandler} to='/logged-user'>  existing user </Link>
                :
                <Route path='/logged-user' exact>
                    <LoggedUser />
                </Route>
            }
        </Fragment>
    )
}
export default ExitingUserButton;

   

import { Fragment } from "react";

const LoggedUser = () => {
    return (
        <Fragment>
            <h1>Hello, user!</h1>
        </Fragment>
    );
};

export default LoggedUser;