I’m trying to create custom form components so I don’t need to update every item if I decide on a style change. The plain TextField version works great but the Select version does not update the value upon selection of a menu item.

Here is my new component

export const ReportSelect = (props) => {
  return (
    <TextField 
    select
    fullWidth
    variant='filled'
    label={props.label}
    value={props.value}
    onChange={props.set}>
      
      {props.items.map(item => (
        <MenuItem key={item} value={item}>{item}</MenuItem>
      ))}

    </TextField>
  );
}

and here is how I use it:

<ReportSelect
     label="Sex"
     value={sex}
     onChange={(e) => setSex(e.target.value)}
     items={['Female', 'Male']}
/>

The drop down shows both options and visually everything is there, but the value just won’t update upon selection.

For additional context, here’s a component that does work the way I intend and correctly updates the value (notice only difference is the addition of the select feature… perhaps this just can’t be done?):

export const ReportTextField = (props) => {
return (
    <TextField 
       fullWidth
       type='text'
       id='filled-basic'
       variant='filled'
       margin='dense'
       size='small'
       label={props.label}
       value={props.value}
       onChange={props.set}
    />
    );
};


// How I use it

<ReportTextField
  label="Last Name"
  value={lastName}
  onChange={(e) => setLastName(e.target.value)}
/>