I have created a form using Material-UI (MUI) that can be customized by the user. When the user clicks the “Add New” button, a new input field is dynamically added. Additionally, upon clicking the submit button, the user should be navigated to the main page. However, I’m encountering an issue where clicking the “Add New” button triggers the onSubmit handler, attempting to route to the main page but failing to do so.

Here’s my onSubmit handler:

const response = axios.post('http://localhost:3001/finance/utilityDetails', { utilityData, priceData });
console.log(response.data);
navigate('/finance/viewUtilityDetails');
setIsSubmit(true);


Console error i get:
No routes matched location "/finance/viewUtilityDetails"