Can't perform a React state update on an unmounted component when use react-cool-inview

Question

I'm using react-cool-inview to handle lazy load ssr in next js but when i redirect router link to next page, it was displayed

"index.js:1 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.
    in Footer (created by Layout)
    in div (created by Layout)
    in div (created by Layout)
    in div (created by Layout)
    in div (created by Layout)
    in main (created by Layout)
    in div (created by Layout)
    in Layout (created by Homepage)
    in Homepage (created by App)"

component displaying issue:

import React, { useEffect } from "react";
import "./style.scss";
import useInView from "react-cool-inview";
import { Link } from 'routers';

const Footer = () => {
  const { observe, inView } = useInView({
    onEnter: ({ unobserve }) => unobserve(),
  });
 
  return (
    <div className="footer pt-4 pb-5" ref={observe}>
      {inview && "something"}
    </div>
  );
};

export default React.memo(Footer);