Material-UI: flip:false doesn’t work as expected

I’m new to Material-UI and jss and adding them to a right-to-left project.

I set it up according to the docs and everything seems to work. MUI components are automatically flipped. However, we still need some components to not be flipped and work normally with ltr. I tried to work with the flip: false property seen here in the docs. It works for the simple example in the docs on normal divs (flips text-align: right to text-align: left). If I put the flip on a MUI component it doesn’t do anything.

const style = {
    affected: {
        textAlign: 'right'
    },
    unaffected: {
        textAlign: 'right',
        flip: false
    }
}

Classes added to the component

<div>
    <FormGroup>
        <FormControlLabel 
            control={
                <Switch 
                    color="primary"
                    className={classes.affected}
                />
            }
            label="Affected Switch"
            labelPlacement="start"
        />
    </FormGroup>
</div>

<div>
    <FormGroup>
        <FormControlLabel 
            control={
                <Switch 
                    color="primary"
                    className={classes.unaffected}
                />
            }
            label="Unaffected Switch"
            labelPlacement="start"
        />
    </FormGroup>
</div>

In the example above I would expect this to render two switches where on the first one the styles on the x-axis are flipped to ltr. However, it only changes the text-align like in the docs example. I’m not sure if this is supposed to work and it’s a bug or if there’s even a way to achieve this. I haven’t found any examples on the web on how to flip specific parts of a component and not just overriding the whole component to ltr and disabling the jss-rtl.

Thanks in advance for any help!

Edit: Added a demo.

Source: ReactJs