IntersectionObserver ошибочно срабатывает при загрузке страницы (Gatsby)

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 мс. Это решает проблему, но я не уверен, что это правильный способ сделать это?