Now I have this => navigate(-1);
which is part of a button that’s navigate back, here’s the function fired when the user clicks the button

const handleClick = async (e: MouseEvent<HTMLButtonElement>) => {    
    try {
        //  go back is confirmed
        navigate(-1);
      }
    } catch (err) {
      // go back is cancelled
    }
  }

but the situation is : the user can navigate though many pages and the history will be like this :
‘/main’ => ‘chat?page=1’ => ‘chat?page=2’ => ‘chat?page=3’
and If the user in page 3 and clicked on the back button, he will go back to page 2, how can I avoid all this page and go directly from page 3 to main?

I tried removing the params using setSearchParams but it ended up moving the user to a new page and the stack became like this : ‘/main’ => ‘/chat?page=1’ => ‘/chat?page=2’ => ‘/chat?page=3’ => ‘/chat’