MUI - Round border radius FormControl

I have a FormControl which currently looks something like this:

Now the problem is in the image below, the label Username is getting set at the edge due to the borderRadius which is making the label position a bit odd for me. I want the label to align with the input text starting alignment. I tried using left to position the label but it is creating a white area without border on the left and the label is not coming properly as per the text alignment.

Below is the way I tried:

<FormControl
  sx={{
    '& .MuiOutlinedInput-root': {
      borderRadius: '40px',
      '& fieldset': {
        borderColor: 'rgba(0, 0, 0, 0.23)', // default border
      },
      '&:hover fieldset': {
        borderColor: '#1976d2', // hover border
      },
      '&.Mui-focused fieldset': {
        borderColor: '#1976d2', // focused border
      },
    },
    '& .MuiInputLabel-root': {
      paddingLeft: '8px',
      backgroundColor: 'white',
      px: 0.5,
      mx: 1,
      transform: 'translate(14px, 14px) scale(1)',
      '&.MuiInputLabel-shrink': {
        transform: 'translate(14px, -6px) scale(0.75)',
      },
    },
  }}
>
  <InputLabel htmlFor="userNameTxt" required>
    Username
  </InputLabel>
  <OutlinedInput
    id="userNameTxt"
    label="Username"
    startAdornment={
      <InputAdornment position="start" sx={{ pl: '.25rem' }}>
        <PermIdentityOutlinedIcon color="primary" />
      </InputAdornment>
    }
    value={data.username}
  />
</FormControl>

This is my trial link - stackblitz. How can I achieve this?

You can play with padding in fieldset and translate value in MuiInputLabel-shrink to achieve this.

    sx={{
          '& .MuiOutlinedInput-root': {
            borderRadius: '40px',
            '& fieldset': {
              borderColor: 'rgba(0, 0, 0, 0.23)', // default border
              padding: '0 30px',
            },
            '&:hover fieldset': {
              borderColor: '#1976d2', // hover border
            },
            '&.Mui-focused fieldset': {
              borderColor: '#1976d2', // focused border
            },
          },
          '& .MuiInputLabel-root': {
            '&.MuiInputLabel-shrink': {
              transform: 'translate(36px, -6px) scale(0.75)',
            },
          },
        }}