[BUG]display: 'none' can not be set

when use 'useAnimate', the 'display:none' can not be set ,but other e.g.'display:inline' is ok.

package version "framer-motion": "^11.0.14"

import React, { useState, useEffect } from "react"
import { useAnimate } from "framer-motion"
...
const FlowPanel = () => {
  const [showMenu, setShowMenu] = useState(false)
  const [scope, animate] = useAnimate()
  
  useEffect(() => {
          const menus = document.getElementsByClassName("flow-panel-menu")
          if (menus.length <= 0) {
              return
          }
  
          const enterAnimation = () => {
              const current = menus[0]
              if (showMenu) {
                  animate(current, { opacity: 1, display: 'inline' }, { duration: 0.7 })
              } else {
                  animate(current, { opacity: 0, display: 'none' }, { duration: 0.7 })
              }
          }
  
          enterAnimation()
      }, [showMenu])

 return (
<div className="flow-panel-menu" ref={scope} >
                    ...
</div>
    )
}

when i set showMenu state to 'false', the 'opacity: 0' will be set correctly, but 'display' will still 'inline'.
if i write the else code like animate(current, { opacity: 0, display: 'contents' }, { duration: 0.7 }), the 'display' will set 'contents'.
i means only display: 'none' cannot be set correctly.

Start with the provided useAnimate reproduction and inspect how display values are applied during animation, comparing 'none' with 'inline' and 'contents'. Confirm the behavior with the supplied React example and ensure that setting display to 'none' takes effect after the opacity animation.