Use framer motion transition prop, instead of Dialog transition prop

[IksGarG]

So im following the idea of using framer motion to animate the opening and closing of a dialog. But i found myself in a position where i want to use the framer motion, motion.div transition prop. But it overlaps with the DialogPanel transition prop.

Is there a way i can specify which of the transitions props I want to use?

              <DialogPanel
                as={motion.div}
                initial={{ x: '50vw' }}
                animate={{ x: 0 }}
                exit={{ x: '50vw' }}
                transition={{ type: 'spring', stiffness: 100 }}
                className='max-w-lg space-y-4 h-full bg-tertiary rounded-l-lg p-2 text-primary'
              >
                <DialogTitle className='font-bold'>
                  Deactivate account
                </DialogTitle>
                <Description>
                  This will permanently deactivate your account
                </Description>
                <p>
                  Are you sure you want to deactivate your account? All of your
                  data will be permanently removed.
                </p>
                <div className='flex gap-4'>
                  <button onClick={() => setIsOpen(false)}>Cancel</button>
                  <button onClick={() => setIsOpen(false)}>Deactivate</button>
                </div>
              </DialogPanel>

And there is an error with the above code in the transition prop that states: Type '{ type: string; stiffness: number; }' is not assignable to type 'boolean | undefined'.ts(2322) that suggests it is using the DialogPanel transition prop.

Thanks!

[IksGarG]

If it helps someone, my workaround was to create a component using forwardRef to pass the ref to the motion.div inside the component. Then, I pass it down to the DialogPanel as a prop:

My component using forwardRef:

const MotionDialogPanel = forwardRef<HTMLDivElement, any>((props, ref) => (
  <motion.div
    ref={ref}
    initial={{ x: '20vw' }}
    animate={{ x: 0 }}
    exit={{ x: '20vw' }}
    transition={{ type: 'spring', stiffness: 300, damping: 30 }}
    className='max-w-lg space-y-4 h-full bg-tertiary rounded-l-xl p-2 text-primary'
    {...props}
  />
));

And then the DialogPanel: <DialogPanel as={MotionDialogPanel}>

If there is a better solution please lmk!