flexDirection is not assignable to CSSProperties

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

React using TypeScript.
```
(JSX attribute) HTMLAttributes.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, 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.

Reproduce the TypeScript example from the issue and inspect the index.d.ts declaration cited in the error, along with the related style type definitions. Determine why the inferred flexDirection value widens to string, then verify that the example type-checks without a literal assertion.

Written by the indexing model from the issue text.