how to reset browser's history stack by navigating to new URL(ReactJS)

Question

I have a scenario. I want to reset the browser history stack, when a user logs in.

this is stack now

index->login->dashboard

As soon as the user logs in, I want the stack to just contain /dashboard.

I have tried

window.location.replace('/dashboard');

This replaces the the current screen ('/login') and pushes '/dashboard'.

stack will go from this

index->login->dashboard

to this

index -> dashboard

I want dashboard to be the initial page after login.

I tried using useNavigate() hook.

const navigate = useNavigate();
navigate('dashboard', {replace:true});

this does the same as the above case, it only replaces the current screen to the new screen, other remaining screens in the history remains.

I have also tried

window.history.replaceState({}, undefined, '/dashboard');

this only replaces the url and does not navigate to /dashboard.

Any help to how I can make dashboard to the initial screen after login is appreciated.

Thank you.