How to change label transform in TextField (MUI package)

When clicking the text area, I want to put the label on top right of text box with transparent border, so it will be like this:

But instead, I received something strange:

import TextField from "@mui/material/TextField";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { makeStyles } from "@material-ui/core/styles";

const theme = createTheme({
  direction: "rtl"
});

const useStyles = makeStyles((theme) => ({
  root: {
    "& label": {
      width: "100%",
      textAlign: "right",
      transformOrigin: "center",
      "&.Mui-focused": {
        transform: "translate(-5, -5px) scale(0)",
        transformOrigin: "center",
      },
    },
  },
}));
export default function CatalogTextBox(params) {
  const classesStyles = useStyles();

  return (
    <ThemeProvider theme={theme}>
      <div className="pt-2 col-sm" dir="rtl">
        <TextField
          className={classesStyles.root}
          type={params.type}
          id="outlined-basic"
          label={params.text}
          variant="outlined"
        />
      </div>
    </ThemeProvider>
  );
}