How can I animate Modal size based on the size prop or classNames?

[ameytessact]

I want to achieve the following:
Whenever the modal size prop changes, the size change should not be abrupt but instead animate in the sense that the height and width should ease in and out instead of immediately changing.

I have implemented it as follows without animation:

enum ModalStep {
  UserDetails = 0,
  DynamicCreation = 1
}

const [currentStep, setCurrentStep] = useState<ModalStep>(ModalStep.DynamicCreation);

<Modal
  size={currentStep === ModalStep.UserDetails ? 'sm' : 'lg'}
  isOpen={isOpen}
  onOpenChange={setIsOpen}
  onClose={() => setCurrentStep(ModalStep.UserDetails)}
>
  <ModalContent className="flex flex-col p-8">
    {currentStep === ModalStep.UserDetails && (
      <AddNewUser />
    )}
    {currentStep === ModalStep.DynamicCreation && (
      <DynamicCreationModal  />
    )}
  </ModalContent>
</Modal>