react-router programmatically navigate does not change 'active' class

[AlveeAkash]

Scenario:

Currently, I am visiting "p1", I am posting some data, then redirecting to user to "p2" using -
const navigate = useNavigate();
navigate("p2");
It redirects perfectly fine, and also add the 'active' class to the 'p2'.

Problem:
It does not remove 'active' class from 'p1'. as a result, after the redirect, it shows both of the link/page 'active'

Expected:
It will only show 'p2' page 'active'. not 'p1' anymore.