如何在打字稿中没有额外的div的情况下使用createPortal？

Question

我经常像下面的代码一样使用createPortal：

        const containerEle = document.createElement('div');
        const App = function(){
            useEffect(()=>{
            document.body.appendChild(containerEle);
            return ()=>{
              document.body.removeChild(containerEle);
            }
          },[])
            return createPortal(<div className="my-component"/>, containerEle);
        }

将呈现为

<div><div className="my-component"/></div>

但实际上我只是想

<div className="my-component"/>

我尝试将createElement（'div'）修改为类似于

的片段

 const containerEle = document.createDocumentFragment();

它可以工作，但是在打字稿中，它告诉我错误：

TS2345: Argument of type 'DocumentFragment' is not assignable to parameter of type 'Element'.

对于createDocumentFragment，返回DocumentFragment。
我应该如何修改代码以消除此错误？