HELP! The drag function is not working fine after customization the animation of sheet modal

Ionic Framework Ionic React
1

I want to change the modal animation to as required as below.

design

After referencing to the ionic doc: https://ionicframework.com/docs/api/modal#animations
I wrote a component as below:

export function AppActionSheet({
  isOpen,
}: any) {

  const enterAnimation = (baseEl: HTMLElement) => {
    const root = baseEl.shadowRoot;

    const backdropAnimation = createAnimation()
      .addElement(root?.querySelector("ion-backdrop")!)
      .keyframes([
        { offset: 0, opacity: "0" },
        { offset: 1, opacity: "0.6" },
      ])
      .duration(300)

    const wrapperAnimation = createAnimation()
      .addElement(root?.querySelector(".modal-wrapper")!)
      .beforeStyles({ opacity: 1 })
      .keyframes([
        { offset: 0, transform: "translateY(100%)" },
        { offset: 1, transform: "translateY(50%)" },
      ])
      .easing("cubic-bezier(0.01, 0.42, 0.35, 1)")
      .delay(300)

    return createAnimation()
      .addElement(baseEl)
      .duration(600)
      .addAnimation([ backdropAnimation, wrapperAnimation ])
  };

  return (
    <IonModal
      isOpen={isOpen}
      backdropDismiss={false}
      initialBreakpoint={0.5}
      breakpoints={[0, 0.5, 0.75, 1]}
      enterAnimation={enterAnimation}
    >
    </IonModal>
  )
}

The animation was working fine, but it caused some drag issue:
When I was trying to drag up, the sheet was going down.
When I was trying to drag down, the sheet was going up.
When I dragged down to the bottom of the window, the sheet dismissed.
after

I could not find the root cause of the issue and don’t know how to solve it.
Please kindly help.

I’m using Ionic 6 + React

2

The issue is solved.
I found an animation name has to be given when calling createAnimation function.

const enterAnimation = (baseEl: HTMLElement) => {
    const root = baseEl.shadowRoot;

    const backdropAnimation = createAnimation("backdropAnimation")
      .addElement(root?.querySelector("ion-backdrop")!)
      .keyframes([
        { offset: 0, opacity: "0" },
        { offset: 1, opacity: "0.6" },
      ])
      .duration(300)

    const wrapperAnimation = createAnimation("wrapperAnimation")
      .addElement(root?.querySelector(".modal-wrapper")!)
      .beforeStyles({ opacity: 1 })
      .keyframes([
        { offset: 0, transform: "translateY(100%)" },
        { offset: 1, transform: "translateY(50%)" },
      ])
      .easing("cubic-bezier(0.01, 0.42, 0.35, 1)")
      .delay(300)

    return createAnimation()
      .addElement(baseEl)
      .duration(600)
      .addAnimation([ backdropAnimation, wrapperAnimation ])
  };