I am trying to use the Cupertino panes bottom sheet with in my react app. I am able to display the sheet but when ever i add the dragBy attribute as

 dragBy: [".pane .draggable"]

the sheet does not seem to be dragged by the drag handle. Here is the component

// components/MyComponent.tsx
import React, { ReactElement, useContext, useEffect } from "react"
import { useBottomSheet } from "./useBottomSheet"
import { CupertinoSettings } from "cupertino-pane"
import ModalStateContext from "../Map/context"
import { IonApp, IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "@ionic/react"


export interface SheetProps {
  children: ReactElement
  isDisplayed: boolean
  windowHeight: number
}

const BottomSheet = ({ children, isDisplayed, windowHeight }: SheetProps) => {
  const { state } = useContext(ModalStateContext)
  const settings: CupertinoSettings = {
    breaks: {
      top: { enabled: true, height: 400, bounce: false },
      middle: { enabled: true, height: 200, bounce: false },
      bottom: { enabled: true, height: 50, bounce: false },
    },
    bottomClose: false,
    freeMode: false,
    buttonDestroy: false,
  }

  const { presentPane, hidePane } = useBottomSheet(
    "ion-app",
    settings,
    true,
  )
  useEffect(() => {
    // const initializeApp = async () => {
    //   const ionApp = document.querySelector("ion-app") as any
    //   console.log(ionApp)
    //   await ionApp.componentOnReady()
    // }
    // initializeApp()
    if (isDisplayed) {
      presentPane()
    } else {
      hidePane()
    }
  }, [isDisplayed])

  return (
    <IonApp >
      <IonPage>
        <IonContent scrollY={false}>
          <IonHeader>
            <IonToolbar>
              <IonTitle>Header</IonTitle>
            </IonToolbar>
          </IonHeader>
          <IonButton
            expand="full"
            onClick={() => console.log("Drawer Button Clicked")}
          >
            Content
          </IonButton>
        </IonContent>
      </IonPage>
    </IonApp>
  )
}

export default BottomSheet

this is my custom hook

// hooks/useCupertinoPane.ts
import { useContext, useEffect, useRef, useState } from "react"
import { CupertinoPane, CupertinoSettings } from "cupertino-pane"
import ModalStateContext from "../Map/context"

export const useBottomSheet = (
  selector: string,
  settings: CupertinoSettings,
  newPane: boolean = false,
) => {
  const paneRef = useRef<CupertinoPane | null>(null)
  const [showContent, setShowContent] = useState(false)
  const { state, dispatch } = useContext(ModalStateContext)

  useEffect(() => {
    if (!paneRef.current && newPane) {
      paneRef.current = new CupertinoPane(selector, {
        ...settings,
        parentElement: "body",
        dragBy: [".pane .draggable"],
        bottomClose: false,
        events: {
          onDrag: (event) => {
            console.log("drag event")
            if (event.to === "bottom") {
              setShowContent(true)
            } else {
              setShowContent(false)
            }
          },
        },
      })
    }
    // return () => {
    //   paneRef.current?.destroy()
    // }
  }, [])

  const presentPane = async () => {
    await paneRef.current?.present({ animate: true })
    const dd = await paneRef.current?.enableDrag()
    console.log(dd)
    console.log(paneRef.current?.draggableEl)
  }
  const hidePane = async () => {
    console.log("in pane hider")
    paneRef.current?.destroy({ animate: true })
  }
  const updatePaneHeights = async () => {
    console.log("in updating heights")
    await paneRef.current?.updateScreenHeights()
    await paneRef.current?.setBreakpoints({
      top: { enabled: true, height: 800, bounce: false },
      middle: { enabled: true, height: 400, bounce: false },
      bottom: { enabled: true, height: 100, bounce: false },
    })
    await paneRef.current?.moveToBreak("bottom")
  }

  return { presentPane, hidePane, updatePaneHeights }
}

can you help me identify why the drag event is not being attached?