Function to return string in css property MUI v5 styled()

I'm using MUI v5's styled() and want to return a different color based on two props of the component (darkMode and destructive).

Here's what I'm doing:

const StyledButton = styled(Button)<ButtonProps>(({ darkMode, destructive }) => ({
  '&.MuiButton-contained': {
    backgroundColor: () => {
      if (!darkMode) return 'purple';
      else return 'red';
    },
    '&:hover': {
      backgroundColor: colors.standardHoverColor
    },
    '&:focus': {
      backgroundColor: colors.standardFocusColor
    }
  },
}));

I want the backgroundColor to be purple if darkMode is off, and red if it's on. There's other configurations based on destructive too, but this is a POC.

Any ideas how I can accomplish this dynamic styling based on the two props?

Thanks in advance.