Estoy trabajando en una extensión de Chrome donde estoy insertando un div en la página dentro de la cual estoy inyectando un iframe que carga una aplicación de reacción, quiero poder arrastrar el div pero por alguna razón jquery ui agrega la interfaz de usuario -clase arrastrable pero el arrastre no funciona

 import React from "react"; import ReactDOM from "react-dom"; import Frame, { FrameContextConsumer } from "react-frame-component"; import $ from "jquery"; import { App as SideToggle } from "./SideToggle/App"; require("jquery-ui/ui/widgets/draggable"); class SideToggleContainer extends React.Component { render() { return ( <Frame head={[ <link type="text/css" rel="stylesheet" href={chrome.runtime.getURL("/static/css/content.css")} ></link>, <link rel="preconnect" href={"https://fonts.googleapis.com"}></link>, <link rel="preconnect" href={"https://fonts.gstatic.com"}></link>, <link rel="stylesheet" href={ "https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@200;400;600&family=Merriweather:ital,wght@0,400;1,700&family=Roboto+Mono:ital,wght@0,400;1,700&display=swap" } ></link>, ]} > <FrameContextConsumer> {({ document, window }) => { return ( <SideToggle chrome={chrome} iframeDocument={document} iframeWindow={window} isExt={true} /> ); }} </FrameContextConsumer> </Frame> ); } } const sideToggleContainer = document.createElement("div"); sideToggleContainer.id = "side-toggle-iframe-container"; document.body.appendChild(sideToggleContainer); ReactDOM.render(<SideToggleContainer />, sideToggleContainer); $("#side-toggle-iframe-container").draggable({ handle: "#notealy-side-toggle-iframe-container", axis: "y", containment: "window" });