flexDirection is not assignable to CSSProperties

flexDirection: string; is not assignable to type 'CSSProperties'

React using TypeScript.

(JSX attribute) HTMLAttributes<HTMLDivElement>.style?: React.CSSProperties
Type '{ backgroundColor: string; display: string; flex: string; flexDirection: string; }' is not assignable to type 'CSSProperties'.
  Types of property 'flexDirection' are incompatible.
    Type 'string' is not assignable to type 'FlexDirectionProperty'.ts(2322)
index.d.ts(1763, 9): The expected type comes from property 'style' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

Get this error when trying to assign a flexDirection in styles:

const styles = {
  root: {
    backgroundColor: 'red',
    display: 'flex',
    flex: 'row',
    flexDirection: 'row',
  },
};

This really confuses me:

Types of property 'flexDirection' are incompatible.
            Type 'string' is not assignable to type '"row" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row-reverse" | PropsFunc<{}, FlexDirectionProperty>'.ts(2345)

It doesn't know that the string 'row' is === "row"

single quotes are being put in place via eslint/prettier, even when I try using double quotes it doesn't change it. I have also tried nested flex properties in an object:

flex : {
  direction: 'row',
}

and

flex: {
  flexDirection: 'row',
},

But neither of those work.

EDIT:

I found a workaround:

flexDirection: 'row' as 'row',

This allows it to work as expected but is super clunky.