谷歌翻译后导致react重渲染失效

最近碰到一个问题，系统在海外使用时，进行谷歌翻译后再对表单操作，会导致页面报错：

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at removeChild (react-dom.development.js:7601:1)
    at unmountHostComponents (react-dom.development.js:20449:1)
    at commitDeletion (react-dom.development.js:20500:1)
    at commitMutationEffects (react-dom.development.js:22782:1)

去掉相关业务代码后，发现可以这样复现：

const Text: React.FC<{ text?: string }> = ({ text = '-' }) => {
  return (<>{text}</>);
};

const Demo: React.FC<any> = () => {
  const [text, setText] = React.useState<string>('初始值');

  return (<div>
    <p><Text text={text} /></p>
    <button type='button' onClick={() => {
      setText('改变后' + Math.random());
    }}>改变</button>
  </div>);
};

在不经过谷歌翻译时，点击「改变」按钮逻辑一切正常执行。当渲染完毕，先使用谷歌翻译进行翻译后在点击改变按钮，会发现组件的re-render失效。但此demo中不会有报错，报错的原因应该是复杂的使用环境导致。

继续研究发现，该写法下，如果不经过谷歌范围，生成的dom结构为：

<div><p>-</p><button type="button">改变</button></div>

经过谷歌翻译后，dom结构会被谷歌翻译改为：

<div>
  <p>
    <font style="vertical-align: inherit;">
      <font style="vertical-align: inherit;">初始值</font>
    </font>
  </p>
  <button type="button">
    <font style="vertical-align: inherit;">
      <font style="vertical-align: inherit;">Change</font>
    </font>
  </button>
</div>

猜测：空标签（<></>,<React.Fragment></React.Fragment>）生成的dom结构如果受到了非react控制的dom结构变化会导致空标签内容re-render失效。

所以问题的解决方案为,在Text组件中，添加元素包裹：

const Text: React.FC<{ text?: string }> = ({ text }) => {
  return (<span>{text}</span>);
};

如果该解决方法无法解决问题，可以添加禁止元素内内容翻译：

const Text: React.FC<{ text?: string }> = ({ text }) => {
  return (<span class="notranslate">{text}</span>);
};

本人的解决方案是先尝试不允许翻译来解决该问题，但是后面发现，只需要不使用<></>方式就可以解决，故而推测导致这个问题的原因是空标签的特殊场景下的设定导致。