IntersectionObserver выдает ошибочно 'true' при загрузке страницы (Гэтсби)

Question

Я пытаюсь использовать API IntersectionObserver для запуска анимации, когда элемент попадает в область просмотра на моем сайте Gatsby. На самом деле, это работает как ожидалось. Есть только одна вещь, которую я не могу обернуть вокруг себя. После монтирования компонента наблюдатель срабатывает и выдает «истину», как если бы элемент находился в области просмотра. Вот код моего хука useOnScreen и компонента React:

import { useState, useEffect } from "react"

const useOnScreen = (ref, rootMargin = "0px") => {
  const [isIntersecting, setIntersecting] = useState(false)

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIntersecting(entry.isIntersecting)
      },
      {
        rootMargin,
      }
    )
    if (ref.current) {
      observer.observe(ref.current)
    }
    return () => {
      observer.unobserve(ref.current)
    }
  }, [])
  console.log("isIntersecting", isIntersecting)
  return isIntersecting
}

const About = ({ content }) => {
    const { frontmatter, body } = content[0].node

    useEffect(() => console.log("About.js - isMounted"), [])

    const ref = useRef();
    const onScreen = useOnScreen(ref, "-100px")

    return (
      <StyledSection id="about">
        <StyledContentWrapper>
          <motion.div className="inner-wrapper" ref={ref} animate={fade(onScreen)}>
            <h3 className="section-title">{frontmatter.title}</h3>
            <div className="text-content">
              <MDXRenderer>{body}</MDXRenderer>
            </div>
          </motion.div>
        </StyledContentWrapper>
      </StyledSection>
    )
  }

Если я загружаю страницу / компонент, я получаю следующий консольный журнал:

isIntersecting false | useOnScreen.js:27 
About.js - isMounted | about.js:67
isIntersecting true  | useOnScreen.js:27 
isIntersecting false | useOnScreen.js:27 

Кто-нибудь знает, почему наблюдатель срабатывает после монтирования компонента?

В настоящее время я решаю эту проблему, запустив строку observer.observe(ref.current) с setTimeout 1000 мс. Это решает это, но я не уверен, что это правильный способ сделать это?