Custom animations on react-responsive-modal-modal

[Link2Twenty]

Bug report

Describe the bug

If you want to have a custom animation on your modal window, such as a shake for incorrect password entry, you cannot because the fade in and out styles are added to the element with JS.

To Reproduce

Some code like this shows the problem (codesandbox).

const [classList, setClassList] = useState([]);

<Modal classNames={{ modal: classList }} open={open} onClose={()=>{}}>
  <button onClick={() => {
    setClassList(array => [...array, "custom-animation"])
  }}>
    Shake it
  </button>
</Modal>

.custom-animation {
  animation: shakeit 500ms linear;
}

@keyframes shakeit {
  8%,
  41% {
    transform: translateX(-10px);
  }

  25%,
  58% {
    transform: translateX(10px);
  }

  75% {
    transform: translateX(-5px);
  }

  92% {
    transform: translateX(5px);
  }

  0%,
  100% {
    transform: translateX(0);
  }
}

Expected behaviour

When the fade animation finished the style should be removed from the element

Screenshots

N/A

System information

N/A

Additional context

There is a work around I use at the moment but it would be nicer if the component handled it (codesandbox).

const onFinishFade = () => {
  const { current } = modalBox;

  current.style.animation = null;
};