cancelToken: ourRequest.token IS NOT WORKING in React hook

Question

I'm getting an Error While rendering between screens in my react-node.js project and I cannot get it off

This is my homescreen

  const [q, setQuery] = useState("woman");
  const [movies, setMovies] = useState(null);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(true);
  const [showScroll, setShowScroll] = useState(false);

  const checkScrollTop = () => {
    if (!showScroll && window.pageYOffset > 400) {
      setShowScroll(true);
    } else if (showScroll && window.pageYOffset <= 400) {
      setShowScroll(false);
    }
  };

  window.addEventListener("scroll", checkScrollTop);

  let textInput = React.createRef();

  const searchHandler = (e) => {
    e.preventDefault();
    setQuery(textInput.current.value);
    textInput.current.value = "";
  };

  useEffect(() => {
    setLoading(true);
    const ourRequest = axios.CancelToken.source();
    async function fetchMovies() {
      try {
        const config = {
          headers: { "Content-Type": "application/json" },
          cancelToken: ourRequest.token,
        };
        const { data } = await axios.post("/api/movies", { q }, { config });
        // console.log(data);
        if (data.Response === "False") {
          if (data.Error === "Incorrect IMDb ID.")
            setError("Cannot find movie");
          else setError(data.Error);
        } else setError("");
        setMovies(data.Search);
        setLoading(false);
      } catch (error) {
        console.log(error);
        setLoading(false);
      }
    }
    fetchMovies();
    q
      ? localStorage.setItem("query", JSON.stringify(q))
      : localStorage.setItem("query", JSON.stringify("woman"));
    return () => {
      ourRequest.cancel("Cancelling in cleanup");
    };
  }, [q]);

This is the second screen

const MovieScreen = ({ match }) => {
  const id = match.params.id;
  const [movie, setMovie] = useState({});
  const [rating, setRating] = useState(5);
  const [addReview, setAddReview] = useState(false);
  const [addRevBack, setaddRevBack] = useState("Add a review");
  const [watchAll, setWatchAll] = useState(false);
  const [showScroll, setShowScroll] = useState(false);

  const checkScrollTop = () => {
    if (!showScroll && window.pageYOffset > 400) {
      setShowScroll(true);
    } else if (showScroll && window.pageYOffset <= 400) {
      setShowScroll(false);
    }
  };

  window.addEventListener("scroll", checkScrollTop);

  useEffect(() => {
    const ourRequest = axios.CancelToken.source();
    async function fetchData() {
      try {
        const config = {
          headers: { "Content-Type": "application/json" },
        };
        const { data } = await axios.get(
          `/api/movies/${id}`,
          { cancelToken: ourRequest.token },
          config
        );
        // console.log(data);
        setMovie(data);
        setRating(movie.Ratings[0].Value.split("/", 1)[0]);
      } catch (err) {
        console.log(err);
      }
    }
    fetchData();
    return () => {
      ourRequest.cancel();
    };
  }, []);
  const addReviewHandler = () => {
    setAddReview((prev) => !prev);
    setaddRevBack((prev) =>
      prev === "Add a review" ? "Back" : "Add a review"
    );
  };
  useEffect(() => {
    window.scrollBy(0, 4000);
  }, [watchAll]);

  const watchAllHandler = () => {
    setWatchAll(true);
    console.log(window.pageYOffset);
  };

I DON'T KNOW WHAT AM I DOING WRONG I KEEP GET THE ERROR: I saw some advice on other places but none of them helped me... I would be very appreciative if someone can look at my code and see what am I doing wrong

EDIT I solve the problem, the issue was with window.addEventListener("scroll", checkScrollTop); which I needed to remove like this:

  const checkScrollTop = () => {
    if (!showScroll && window.pageYOffset > 400) {
      setShowScroll(true);
    } else if (showScroll && window.pageYOffset <= 400) {
      setShowScroll(false);
    }
  };

  useEffect(() => {
    window.addEventListener("scroll", checkScrollTop);
    return () => {
      window.removeEventListener("scroll", checkScrollTop);
    };
  }, []);