I'm trying to customize the textField component but I have an issue with the label when it's shrinked:

import * as React from "react";
import TextField from "@mui/material/TextField";
import { createTheme } from "@mui/material/styles";
import createStyled from "@mui/system/createStyled";
import type { TextFieldProps } from "@mui/material/TextField";

const defaultTheme = createTheme({});
const styled = createStyled({ defaultTheme });

const CustomTextField = styled(TextField)<TextFieldProps>(
  ({ theme, size }) => ({
    "& .MuiOutlinedInput-root": {
      height: size === "small" ? theme.spacing(5) : theme.spacing(6)
    },
    "& .MuiInputLabel-root": {
      transform: "translate(14px, 8px) scale(1)"
    },
   "& .MuiInputLabel-shrink": {
      transform: "translate(12px, -9px) scale(0.75)",
      fontSize: "12px",
      fontWeight: 500,
      letterSpacing: 0.6,
      lineHeight: '20px',
      "&.MuiInputLabel-sizeSmall": {
        transform: "translate(12px, -9px) scale(0.75)"
      }
    }
  })
);

export default function BasicTextFields() {
  return (
    <CustomTextField
      id="outlined-basic"
      label="long"
      variant="outlined"
      size="medium"
      InputLabelProps={{ shrink: true }}
    />
  );
}

There is extra space between the border and the text: