AutoAnimate AutoAnimate  is a package that adds smooth transitions to your web app npm install @formkit/auto-animate  install via npm Animations are only triggered when immediate children of the parent element (the one you passed to autoAnimate) are added, removed, or moved. The parent element will automatically receive  position: relative   autoAnimate 
      import autoAnimate from '@formkit/auto-animate'

      const Dropdown = () => {
        const [show, setShow] = useState(false)
        const ref = useRef(null)

        useEffect(() => {
          ref.current && autoAnimate(ref.current)
        }, [ref])

        return (
          <div ref={ref} css={{ margin: '10px', padding: '10px', border: '1px solid grey' }}>
          <button onClick={() => setShow(!show)}>Click me to open!</button>
          {show && <p>Hello...</p>}
          </div>
        )
      }
        useAutoAnimate hook 
      import { useAutoAnimate } from '@formkit/auto-animate/react'

      const UseAutoAnimate = () => {
        const [items, setItems] = useState([0, 1, 2])
        const [parent] = useAutoAnimate()
        return (
          <>
            <ul ref={parent}>
              {items.map(item => (
                <li key={item}>{item}</li>
              ))}
            </ul>
            <button onClick={ () => setItems([...items, items.length])}>Add number</button>
          </>
        )
      }
       