Theme & Props in makeStyles with TS

Question

Found lots of similar questions but nothing that quite answers this. How do you pass both theme and props to the Material UI makeStyles hook but access them from the outermost closure without TS exploding? Something like this:

type StyleProps = {
  post: Post;
}

const useStyles = makeStyles<Theme, StyleProps>((theme: Theme, props: StyleProps) => ({
    root: {
      maxWidth: '100%',
      backgroundImage: ({ post }) => post.mainImage
    },
    date: {
      margin: theme.spacing(1),
      marginLeft: theme.spacing(2)
    },
    heroimage: {
      maxWidth: '100%',
      height: 'auto',
      objectFit: 'cover'
    }
}))

TS Error:

Type '(theme: Theme, props: any) => { root: (props: any) => CSSProperties; expandable: (props: any) => CSSProperties; iconContainer: { position: string; top: number; right: number; display: string; }; expandMoreIcon: (props: any) => CSSProperties; bannerContent: (props: any) => CSSProperties; }' is not assignable to type 'StyleRulesCallback<Theme, StyleProps, string>'.

I can access props inline from a style block like you see in root but that's not what I'm looking for.