Use styled components with framer motion

The cleanest way to use framer motion divs with styled components is by passing the replacement motion component via the as styled components prop.

<styles.MyStyledComponent as={motion.div}></styles.MyStyledComponent>

This maintains the same mental flow as replacing a native HTML element with the motion.<ELEMENT> equivalent.