Does not seem to fully support styled-components?

I want to do this, passing the gatsby-image component `Img into a styled component, while animating it, like so:

const AnimatedImage = styled(motion(Img))`
  width: 200px;
  height: auto;
`

but this does not seem to work, giving me this error:

TypeError: Object(...) is not a function
Module.<anonymous>
src/pages/index.js:81
  78 |   }
  79 | `
  80 | 
> 81 | const LaxImg = styled(motion(Img))`
  82 |   width: 200px;
  83 |   height: auto;
  84 | `

it seems to work with regular html tags, just not react components, which is no bueno for me 😦

Am i doing something wrong? Is something like this not supported? It really needs to be supported, so hopefully I am doing something wrong or it’s on the way.

[jacobgranberry]

Here’s an example of Styled Components working with motion.custom: https://codesandbox.io/s/framer-motion-with-styled-components-custom-components-i1wgk

I think I’m missing something - I don’t see any instance in this example of either a component made with styled components or a component using motion.custom

[rchrdnsh]

just to be clear, this works fine in framer-motion:

const MotionDiv = styled(animated.div)`
  ...styles...
`

…without seemingly any issues, just not this:

const AnimatedReactComponent = styled(animated(ReactComponent))`
  ...styles...
`

…which would be lovely if it did 😁