как переместить метку RTL пользовательского интерфейса материала с помощью React.js

Я пытался переместить метки здесь, чтобы перейти из левого положения в правое, как на этом изображении:

Я хочу, чтобы он шел слева направо. вот мой код:

import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
import FormControl from '@material-ui/core/FormControl';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import AccountCircle from '@material-ui/icons/AccountCircle';
import FormGroup from '@material-ui/core/FormGroup';
import RTL from '../RTL/RTL';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    margin: {
      margin: theme.spacing(1),
    },
    mainInputsContainer: {
      display: 'flex',
      width: '100%',
      justifyContent: 'center',
    },
    mainInputsOverAllWrapper: {
      width: '100%',
    },
  })
);

const InputForm: React.FC = () => {
  const classes = useStyles();

  return (
    <div className={classes.mainInputsOverAllWrapper}>
      <div className={classes.mainInputsContainer}>
        <FormGroup>
          <div className={classes.margin} dir="rtl">
            <RTL>
              <Grid container spacing={1} alignItems="flex-end">
                <Grid item>
                  <AccountCircle />
                </Grid>
                <Grid item>
                  <TextField id="input-with-icon-grid-rtl" label="تجريب" />
                </Grid>
              </Grid>
            </RTL>
          </div>
          <div className={classes.margin} dir="rtl">
            <Grid container spacing={1} alignItems="flex-end" dir="rtl">
              <Grid item>
                <AccountCircle />
              </Grid>
              <Grid item>
                <TextField id="input-with-icon-grid" label="With a grid" />
              </Grid>
            </Grid>
          </div>
        </FormGroup>
        <FormGroup>
          <div className={classes.margin}>
            <Grid container spacing={1} alignItems="flex-end" dir="rtl">
              <Grid item>
                <AccountCircle />
              </Grid>
              <Grid item>
                <TextField
                  id="input-with-icon-grid"
                  dir="rtl"
                  label="اسم المستخدم"
                />
              </Grid>
            </Grid>
          </div>
          <div className={classes.margin}>
            <Grid container spacing={1} alignItems="flex-end" dir="rtl">
              <Grid item>
                <AccountCircle />
              </Grid>
              <Grid item>
                <TextField id="input-with-icon-grid" label="With a grid" />
              </Grid>
            </Grid>
          </div>
        </FormGroup>
      </div>
    </div>
  );
};

export default InputForm;

а вот и мой RTL-файл:

import { create } from 'jss';
import rtl from 'jss-rtl';
import { StylesProvider, jssPreset } from '@material-ui/core/styles';

const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

const RTL: React.FC = (props: any) => (
  <StylesProvider jss={jss}>{props.children}</StylesProvider>
);

export default RTL;

Кстати, я использую TypeScript. Что я пробовал: 1- установка jss-rtl (это не так, как ожидалось). 2- добавление dir="rtl" к компоненту. 3- установка i18next и тоже не вышло