How to define props on framer-motion styled-component? (PSA) - reactjs

Question

PSA:
(not a question but I didn't see any answers to this on stack so here's the answer.)
Define props on a styled-components that wraps a motion, it's a little confusing how to define them when wrapping motion with styled().
how to define props according to styled components docs
import styled from 'styled-components';
import Header from './Header';
interface TitleProps {
readonly isActive: boolean;
}
const Title = styled.h1<TitleProps>`
color: ${(props) => (props.isActive ? props.theme.colors.main : props.theme.colors.secondary)};
`;
How to define the props in your code without motion:
import styled from "styled-components";
interface Props {
height?: number;
}
const Container = styled.div<Props>`
height: ${({ height }) => height};
`;
export default Container;
How to define the props in your code with motion:
import { HTMLMotionProps, motion } from "framer-motion";
import styled from "styled-components";
/**
* notice the props extend HTMLMotionProps<"div"> this is so all the default
* props are passed such as `onClick`
*/
interface Props extends HTMLMotionProps<"div"> {
height?: number;
}
//notice motion is called as a function instead of `motion.div`
const Container = styled(motion<Props>("div"))`
height: ${({ height }) => height};
`;
export default Container;

Answer 1

The problem is that you are defining your "motion div" wrong. It should be defined this way instead:
interface Props {
height?: number;
}
// motion is an object that gives you access to the html tags (like the div)
const Container = styled(motion.div)<Props>`
height: ${({ height }) => height};
`;
As you can see above, you just need to pass in motion.div as any other component, into the styled function.