How can I use a Mui a 'styled' reusable component that has variants with framer motion?

I am running into some difficulty. I have set up a styled Box with variants which all works fine until I want to use it with framer motion. When I add the component={motion.div} it does not recognise the animation or any other framer motion prop.

Any tips out there?

const ShowPlayButton = styled(Box)(({ variants }: Props) => ({
  ...(variants === "mobile" && {
    display: "none",
  }),
  ...(variants === "desktop" && {
    display: "none",
  }),
  ...(variants === "mobilelive" && {
    display: "flex",
  }),
  ...(variants === "desktoplive" && {
    display: "flex",
  }),
}));

<ShowPlayButton
      component={motion.div}
        animate="off"
        initial={false}
        whileHover="on"
        style={{
          inset: "0px 0px 0px 0px",
          position: "absolute",
          backgroundColor: "none",
          zIndex: 0,
          cursor: "pointer",
        }}
      >