Animation does not play back

[osadasami]

Animation does not play back after second click

I have this component

import React from "react"
import { useAnimate } from "react-simple-animate"

export default () => {
  const { play, style, isPlaying } = useAnimate({
    start: { transform: "translateX(0px)" },
    end: { transform: "translateX(200px)" }
  });

  function handleClick() {
    play(!isPlaying)
    console.log('isPlaying: ', isPlaying)
  }

  return (
    <>
      <div style={style}>
        Hello
      </div>
      <button onClick={handleClick}>
        Play
      </button>
    </>
  );
}

I expect that animation will play back after second click but it doesn't and only after double click it plays back

• OS: macOs Catalina 10.15.4
• Browser chrome / safari
• Version Chrome: 84.0.4147.125 / Safari: 13.1

Package version

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3",
"react-simple-animate": "^3.3.9"

[bluebill1049]

Do you have a codesandbox?

[osadasami]

Create sandbox to demonstrate and same problem there https://codesandbox.io/s/keen-pond-mqxhw?file=/src/App.js