MUI Select Border not extending to label, white space - select

Question

I am trying to render a dropdown using #mui/material/Select and want the top border to extend next to the label. Right now there is white space between the label and the right edge of the dropdown div. I checked dev tools and the only border property I could identify was border-radius. Is there a way to make the border extend up next to edge of the label ?
Rendered Dropdown
YearDropdown.js
import React from 'react';
import InputLabel from '#mui/material/InputLabel';
import MenuItem from '#mui/material/MenuItem';
import FormControl from '#mui/material/FormControl';
import Select from '#mui/material/Select';
import styled from 'styled-components';
import { BEM_Date } from 'containerMfe/Functions';
const Form = styled(FormControl)`
width: 80px;
margin-bottom: 15px!important;
& > div > div {
padding: 10px;
}
`
export default function YearDropdown({ columns, yr, handler }) {
const years = [...new Set(columns.map(date => BEM_Date(date).getFullYear()))]
return (
<React.Fragment>
<Form>
<InputLabel id='year-dropdown-label'>Year</InputLabel>
<Select
fullWidth
labelId='year-dropdown-label'
id='year-dropdown'
value={yr}
onChange={handler}
>
{years.map(year => <MenuItem key={'year-' + year} value={year}>{year}</MenuItem>)}
</Select>
</Form>
</React.Fragment>
)
}

Answer 1

I ran into the same issue and could not solve it. In my case, not setting a value or default value seemed to fix the label issue, but my input had to be controlled.
What did work was using the TextField component, with the select prop set to true with InputLabelProps={{ shrink: true }}.
Here is my original Select whose label I could not fix, followed by an equivalent TextField example that works:
// original select implementation with broken label
<FormControl fullWidth>
<InputLabel id="sort-by-label">Sort By</InputLabel>
<Select
label="sort-by-label"
labelId="sort-by-label"
id="sort-by"
value={sortBy}
onChange={handleSortByChange}
variant="outlined"
>
{keys.map((key) => (
<MenuItem key={key} value={key}>
{key}
</MenuItem>
))}
</Select>
</FormControl>
// equivalent TextField implementation that seems to have a functional label
<TextField
select
value={sortBy}
onChange={handleSortByChange}
variant="outlined"
label="Sort By"
InputLabelProps={{ shrink: true }}
>
{keys.map((key) => (
<MenuItem key={key} value={key}>
{key}
</MenuItem>
))}
</TextField>