How to use react-draggable for modal using ant-design

I decided to use the react-draggable npm package for my modal window using ant-design, (for those who don’t know react-draggable, this is a simple component for making elements draggable). But i’m having difficulty i tried to wrap my modal window inside but i got error

Cannot read property ‘className’ of undefined

import React, { useState } from "react";
import "antd/dist/antd.css";
import Modal from "antd/es/modal/Modal";
import Draggable from "react-draggable";
import Button from "antd/es/button";

const App = (props) => {
  const [visible, setVisible] = useState(false);

  return (
    <Draggable>
      <Button onClick={() => setVisible(true)} type="primary">
        Themes
      </Button>
      <Modal
        title="Customize the theme to your liking"
        centered
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
        width={700}
      >
        <div className={"SideBarModal_Wrapper"}>
          <div className={"SideBarModal_Appearance"}>
            <div className={"SideBarModal_Child_Appearance"}>
              <p>Appearance</p>
            </div>

            <div>{props.SideBarWallpaperList}</div>
          </div>

          <div className={"SideBarModal_Accept_Color"}>
            <div className={"SideBarModal_Child_Color"}>
              <p>Colors</p>
            </div>

            <div>{props.list}</div>
          </div>
        </div>
      </Modal>
    </Draggable>
  );
};

export default App;

You can see my code in codesandbox there I have already installed all the required packages but I could not apply react-draggable here is the link https://codesandbox.io/s/xenodochial-mendel-4bdun