Moving in the React router without using an A HREF

Question

I'm sure there exists a simple solution to my problem...

I'm using HashRouter BTW

I need to reset a component to the exact state that it started at... it's like a game and it involves a LOT of class changes and moving elements and trying to get it back to scratch has been a long process... This is a solution that came to my mind. I'm open to a better solution as well

I want to perform the equivalent of clicking on <a href="#/Component/'> with a function, and then return to the old component:

Here is a mockup:

component A

import React from 'react';

function ComponentToBeReset(){
    
   function resetFn(){
    **go to other component called Reset just like clicking a link that href
    }

     return <button onClick={resetFn} > RESET </button>;

}

export default ComponentToBeReset

and the other component:

import React, { useEffect } from 'react';

function Reset(){
    
    useEffect(()=>{
        ** go back to the original component as if a href='#/ComponentToBeReset'
     }

     return <div>RESET IN PROGRESS</div>;

}

export default Reset;