React Material UI: Outlined text field shows line through label - reactjs

Question

I'm using MUI 5 and React and I have this issue that the outlined text field shows line through the label as per the screenshot
I have no idea how to fix it.
My fields looks like this
<FormControl fullWidth variant="outlined">
<InputLabel shrink id={labelId}>
{label}
</InputLabel>
<Controller
as={
<Select
displayEmpty
name={name}
labelId={labelId}
id={name}
label={label}
>
<MenuItem key={`no${name}`} value="">
{intl.formatMessage({
defaultMessage: 'No proxy number',
})}
</MenuItem>
{items.map(pn => (
<MenuItem key={pn.id} value={pn.id}>
<ListItemIcon>
<img
src={pn?.country?.flagIconUrl}
alt={pn.countryCode}
width="20px"
height="15px"
/>
</ListItemIcon>
{pn.value}
</MenuItem>
))}
</Select>
}
name={name}
control={control}
/>
<FormHelperText>{helperText}</FormHelperText>
</FormControl>
Then the above is used as a function called SelectFormInput to make the specific fields
<Grid item xs={6}>
<SelectFormInput
control={control}
labelId="proxyNumber"
name="proxyNumber"
items={proxyNumbers}
label={intl.formatMessage({
defaultMessage: 'Proxy phone Number',
})}
helperText={intl.formatMessage({
defaultMessage: 'Optional. Phone number used by site users',
})}
/>
</Grid>
<Grid item xs={6}>
<SelectFormInput
control={control}
labelId="inboundProxyNumber"
name="inboundProxyNumber"
items={inboundProxyNumbers}
label={intl.formatMessage({
defaultMessage: 'Inbound Proxy Number',
})}
helperText={intl.formatMessage({
defaultMessage: 'Optional. Phone number seen by candidate',
})}
/>
</Grid>
I was unable to find any solution on the net for my specific situation.

Answer 1

I found a solution that helped my specific situation.
I had to add this
input={<OutlinedInput notched label={label} />}
Inside my
<Select
displayEmpty
name={name}
labelId={labelId}
id={name}
input={<OutlinedInput notched label={label} />} />
And so the label UI has been fixed

Answer 2

There is a <fieldset/> tag within the FormControl, and the <legend/> inside of it is making the white block possible.
https://github.com/mui/material-ui/blob/de11911f2e3b15b9fe07ce2625a3ce1cc593093c/packages/mui-material/src/OutlinedInput/OutlinedInput.js#L142
https://github.com/mui/material-ui/blob/de11911f2e3b15b9fe07ce2625a3ce1cc593093c/packages/mui-material/src/OutlinedInput/NotchedOutline.js#L79
I am not sure in your case (<Select/>), but if you are trying to use raw input with the outlined style, you have to give label prop to the <OutlinedInput/>.
<FormControl fullWidth>
<InputLabel>Phone</InputLabel>
<OutlinedInput label="Phone" /> // without label="...", you get the line-through
</FormControl>

Answer 3

you can also try add a background color to InputLabel, on createTheme, this works for me:
import { createTheme } from '#material-ui/core';
const theme = createTheme({
overrides: {
MuiInputLabel: {
root: {
backgroundColor: '#ffffff',
paddingLeft: '4px',
paddingRight: '4px'
}
}
}
});
export default theme;