Being working on a MERN application which uses Vite as the front end going with React. I have used the useEffect hook to fetch the data from the database where the data is listed inside a table. There are no errors or warning in the console but when I console log it seems that the useEffect hook is called twice when the page is refreshed.
Below is my code:

In my application, I am trying to edit a task, which requires the task id to be done, but for some reason my id does not get extracted using useParams. Below is my EditTask.jsx code, the address bar just shows http://localhost:5173/todos/edit/:id