The Error

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Update state before unmount

Make sure all the state updates are aligned before unmounting the component

Cancel pending async processes

Write a useEffect cleanup method to cancel all subscriptions and asynchronous processes.

Check if component is mounted

Create a variable isMounted to keep track of whether the component is still mounted. In useEffect cleanup, we set isMounted to false, which tells the interval to stop updating the state when the component is unmounted.