React拖拽功能出现报错与功能失效矛盾问题求助

各位React开发的小伙伴们，我最近在做拖拽功能的时候碰到了一个两难的问题，实在搞不定了，来求助大家！

• 当我在dragOverHandler里加上e.preventDefault()的时候，拖拽功能能正常工作，但控制台会抛出一个错误：

Uncaught TypeError: t.drop is not a function
at content.js:1:38480
at Object.handleEvent (content.js:1:41982)

• 可如果我删掉e.preventDefault()，控制台倒是没报错了，但拖拽功能直接失效，根本拖不动元素。

我当前的代码是这样的：

export default function Dashboard() {

const dragOverHandler = (e) => {
  e.preventDefault()
}

return (
  <div>
    <div id='1' draggable={true}
      onDragOver={(e) => dragOverHandler(e)}
    >one element
    </div>
    <div id='2' draggable={true}
      onDragOver={(e) => dragOverHandler(e)}
    >another element
    </div>
  </div>
)
}

现在的情况是，拖拽功能其实是能正常运行的，但那个报错一直存在，怎么都消不掉，有没有大佬知道这是哪里出问题了？

备注：内容来源于stack exchange，提问作者Peter