How to fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function error

Question

Warning: 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.

useEffect(() => {
    const unsubscribe = streamCourses({
      next: (querySnapshot) => {
        const task = querySnapshot.docs.map((docSnapshot) => 
            mapDocTask(docSnapshot)
          );
        setCourseDetails(task);
      },
      error: (error) => console.log(error),
    });
    return unsubscribe;
  }, [setCourseDetails]);