这是正确的代码，正确地水合代码，例如在一个使用效果？

import React, { useEffect, useRef } from 'react'
import { hydrate, unmountComponentAtNode } from 'react-dom'

export default function ({ html }: { html: string }) {
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const domNode = ref.current
    if (domNode) {
      if (domNode.innerHTML) {
        unmountComponentAtNode(domNode)
      }

      domNode.innerHTML = html
      hydrate(<MyComponent />, domNode)
    }
    return () => {
      if (domNode) {
        unmountComponentAtNode(domNode)
      }
    }
  }, [html])

  return <div ref={ref} />
}

我知道这是一个奇怪的模式，但基本上我们是从一个网络工作者执行“SSR”，这是这个奇怪的方法的背景
然而，这产生了许多奇怪的错误，包括

Warning: render(...): It looks like the React-rendered content of this container was removed without using React. This is not supported and will cause errors. Instead, call ReactDOM.unmountComponentAtNode to empty a container.

我还看到其他罕见的错误，如

Node.removeChild: The node to be removed is not a child of this node

以及

Warning: unmountComponentAtNode(): The node you're attempting to unmount was rendered by another copy of React.