Navigate to another page with data in a React Component after fetch

I am new to React + typescript and is trying to use “react-router-dom” to make a login component to communicate with my backend server.

Basically I am trying to make a class “Login” that, upon submitting a form, will trigger a fetch request to my server. If the response from my server is OK, I will then navigate to another page with the input data.

Everything works fine until I try to navigate to my second page. The thing is, I don’t want the login credentials to appear in the url, and the rule of hooks is preventing me from using the navigate hook after checking the status code of my fetch response.

Does anyone have an idea about how I can achieve this? Any help would be appreciated.