Issue with interaction prop

[Meemaw]

Hi, thanks for this great library 👍

I've been trying to use the interaction prop, and I'm having some issues.

We're defining our Media component like this:

export const breakpoints = {
  xs: 0,
  sm: 600,
  md: 768,
  lg: 1024,
  xl: 1200,
  xxl: 1600,
} as const

const interactions = {
  landscape: "not all and (orientation: landscape)",
  portrait: "not all and (orientation: portrait)",
  hover: "(hover: hover)",
  notHover: "(hover: none)",
} as const

const MediaResult = createMedia({
  breakpoints,
  interactions,
})

After, we've wanted to show something only if the device supports hover. I would expect this to work on desktop, but it doesn't:

          <Media interaction="hover">
            <AssetCardAnnotationsBuyNowContainer>
              <AssetCardBuyNow dataKey={asset} />
            </AssetCardAnnotationsBuyNowContainer>
          </Media>

I can see the following styles applied in browser:

Any ideas?