I made a hook for intersection observer but it is returning state as false in initial render and then returning true. my element is 100% visible to observer but I don't know why it is returning false at initial render. any way to solve this ?

App.js:

import React from "react";
import "./App.css";
import useIntersectionObserver from "./hooks/useIntersectionObserver";
const App = () => {
  const Ref = React.useRef(null);
  const { observer, state } = useIntersectionObserver({ rootMargin: "10px" });
  React.useEffect(() => {
    observer.observe(Ref.current);
    console.log(state);
  }, [observer, state]);
  return (
    <>
      <h1 ref={Ref}>Hello World</h1>
      <h3>Text</h3>
    </>
  );
};

export default App;

useIntersectionObserver custom hook:

import React from "react";

const useIntersectionObserver = ({ options }) => {
  const [state, setState] = React.useState(false);
  function callbackfn(entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        setState(true);
      } else {
        setState(false);
      }
    });
  }
  const observer = new IntersectionObserver(callbackfn, options);
  return { observer, state };
};

export default useIntersectionObserver;

it will give you this, in console: