Javascript 使用IntersectionObserver和HTML在React中延迟加载组件<；模板>；标签问题？

我正在尝试编写一个组件，它使用IntersectionObserver打开放置在HTML

标记中的内容。这是我的密码：

useEffect(() => {
  const templates = document.querySelectorAll('template');

  function unwrap(wrapper) {
    // Place childNodes in document fragment
    const docFrag = document.createDocumentFragment();
      
    while (wrapper.firstChild) {
      const child = wrapper.removeChild(wrapper.firstChild);
      docFrag.appendChild(child);
    }
  
    // Replace wrapper with document fragment
    wrapper.parentNode.replaceChild(docFrag, wrapper);
  }

  let observer = new IntersectionObserver (
    entries => entries.forEach(entry => {
      if(entry.isIntersecting) {
        entry.target.unwrap(templates)
      }
    }),
    {
      rootMargin: '0px 0px 200px 0px'
    }
  )
  observer.observe(templates)
}, []);

我看过多个代码示例，但不明白为什么会出现此错误

TypeError:未能在“IntersectionObserver”上执行“observe”：参数1不是“Element”类型

---

如果您将

templates

记录在

observer之前的控制台上，将非常感谢您提供的任何帮助或输入。观察（模板）

，它会返回什么？