[TextField] Fix floating label position

[oliviertassinari]

I never thought that there would still be bugs opportunities in this outline input 😁. You can reproduce this on https://codesandbox.io/s/muddy-leaf-t4y7z5?file=/package.json

import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";

export default function BasicTextFields() {
  return (
    <Box sx={{ m: 2 }}>
      <TextField
        id="outlined-basic"
        InputLabelProps={{ shrink: true }}
        label="Foo Foo Foo Foo Foo Foo Foo F"
        variant="outlined"
      />
    </Box>
  );
}

Before:

After:

---

I have noticed this on https://next.mui.com/x/react-date-pickers/getting-started/#installation, it feels broken:

[mui-bot]

Netlify deploy preview

https://deploy-preview-36246--material-ui.netlify.app/

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against 2e13f8b