React-Vite-TailwindCSS项目中React-Draggable组件包裹元素后无法渲染问题求助

大家好，我在React+Vite+TailwindCSS的项目里遇到了个棘手的问题，想请各位帮忙排查下：

我尝试使用react-draggable让页面上的组件支持拖拽，但只要用<Draggable />包裹目标元素，这个组件就完全不渲染了——页面上只显示index.html里设置的背景色，原本的窗口组件完全看不到。但如果去掉<Draggable>包裹的话，组件就能正常渲染，也能通过aboutOpen状态控制显示/隐藏，只是没法拖拽。

正常工作的代码（无拖拽功能） #

import "tailwindcss"
import React from "react"
import Draggable from "react-draggable"

const ABOUT_WINDOW_STYLES = {
  transform: `translate(60%, 30%)`
}

export default function AboutWindow({ aboutOpen, aboutOnClose }) {
  return (
    <div className= {`transition-all select-none ${aboutOpen ? "scale-100 opacity-100" : "scale-0 opacity-0"}`}>
      <div style={ABOUT_WINDOW_STYLES} className="absolute bg-windowBox mb-15 w-205 h-130 drop-shadow-2xl/20 rounded-sm self-center justify-self-center outline-2 outline-black z-20">
        <div className="flex w-full bg-siteGreen h-15 rounded-t-sm justify-between drop-shadow-lg/25 outline-2">
          <h1 className="text-3xl font-dotoBold text-white ml-4 m-2 mt-2.5">&lt;about&gt;</h1>
          <button onClick={aboutOnClose} className="mr-3 mt-3 max-w-15 max-h-10 justify-items-center text-center hover:bg-black/20">
            <h1 className="pl-4 group-hover:select-none text-3xl font-dotoBold text-white self-center justify-self-center mb-1 mr-3">[X]</h1>
          </button>
        </div>
        <div className="flex flex-col justify-center h-115 max-w-full max-h-115 text-wrap overflow-y-auto wrap-anywhere">
        </div>
      </div>
    </div>
  )
}

包裹<Draggable />后无法渲染的代码 #

import "tailwindcss"
import React from "react"
import Draggable from "react-draggable"

const ABOUT_WINDOW_STYLES = {
  transform: `translate(60%, 30%)`
}

export default function AboutWindow({ aboutOpen, aboutOnClose }) {
  return (
    <Draggable>
      <div className= {`transition-all select-none ${aboutOpen ? "scale-100 opacity-100" : "scale-0 opacity-0"}`}>
        <div style={ABOUT_WINDOW_STYLES} className="absolute bg-windowBox mb-15 w-205 h-130 drop-shadow-2xl/20 rounded-sm self-center justify-self-center outline-2 outline-black z-20">
          <div className="flex w-full bg-siteGreen h-15 rounded-t-sm justify-between drop-shadow-lg/25 outline-2">
            <h1 className="text-3xl font-dotoBold text-white ml-4 m-2 mt-2.5">&lt;about&gt;</h1>
            <button onClick={aboutOnClose} className="mr-3 mt-3 max-w-15 max-h-10 justify-items-center text-center hover:bg-black/20">
              <h1 className="pl-4 group-hover:select-none text-3xl font-dotoBold text-white self-center justify-self-center mb-1 mr-3">[X]</h1>
            </button>
          </div>
          <div className="flex flex-col justify-center h-115 max-w-full max-h-115 text-wrap overflow-y-auto wrap-anywhere">
          </div>
        </div>
      </div>
    </Draggable>
  )
}

我已经确认react-draggable依赖安装正常，且两种情况下aboutOpen状态都为true，但就是包裹<Draggable>后组件完全不渲染。有没有遇到过类似问题的朋友，能给点排查方向或者解决建议吗？

内容来源于stack exchange