I want the label to be displayed properly and take width according to its value ,i.e, criteria(Roles,No. of Employees ,etc ) and dont want to give it a fixed width.

Whats happening is that the label is not fully displayed , i.e, not taking width properly , I dont want to give the FormControl fullWidth prop. Below is the code. (I will change the values for MenuItems later , I want to to fix this issue first)

function Filter() {
        const filterCritieria=[
            'Roles','No of Employees','Experience','Remote','Minimum Base Pay Salary'
        ]
      return (
       <>
       {filterCritieria.map((criteria,index)=>(
           <FormControl key={index} sx={{  margin: '10px' }} >
               <InputLabel  htmlFor={criteria} >{criteria}</InputLabel>
               <Select
                   value={12}
                   label={criteria}
                   id={criteria} 
                   
               >
                   <MenuItem value={10}>Ten</MenuItem>
                   <MenuItem value={20}>Twenty</MenuItem>
                   <MenuItem value={30}>Thirty</MenuItem>
               </Select>
           </FormControl>
       ))}
             
             
            
       </>
      )
    }

Thanks in advanced