MaterialUI Select set value is always out of range

Question

i've a MaterialUI Select code, and i'm handling the value parameter dynamically. My problem is, when i set any value, it says always it's out of range, even showing the value in the valid values.

SelectInput.js:291 Material-UI: you have provided an out-of-range value `100001,250000` for the select (name="followers") component. Consider providing a value that matches one of the available options or ''. The available values are `0,50000`, `50001,100000`, `100001,250000`, `250001,500000`, `500001,750000`, `750001,9007199254740991`. (anonymous) @ SelectInput.js:291 

And this is my code simplified:

const followers = [   { '0-50k': [0, 50000] },   { '50k-100k': [50001, 100000] },   { '100k-250k': [100001, 250000] },   { '250k-500k': [250001, 500000] },   { '500k-750k': [500001, 750000] },   { '+1M': [750001, Number.MAX_SAFE_INTEGER] }, ];      <div className={classes.formGroup}>                       <InputLabel id="followersL">Followers</InputLabel>                       <Select                         className={classes.field}                         fullWidth                         id="followers"                         labelId="followersL"                         margin="dense"                         displayEmpty                         name="followers"                         onChange={(event) => setValue(event.target.value)} //I've updated the sate with the new value                         value={                           filters.basicInfo.followers                             ? value                              : ''                         }                         variant="outlined"                       >                         {followers.map((element) => (                           <MenuItem                             value={element[Object.keys(element)]}                             key={Object.keys(element)[0]}                           >                             {Object.keys(element)[0]}                           </MenuItem>                         ))}                       </Select>                     </div> 

As you can see in the message, the value selected 100001,250000 it's inside the range examples 100001,250000

Where is the problem?

Answer 1

add this defaultValue = "" like this <Select ... defaultValue="" >

Answer 2

This advice may be useful for others: If the value for Select element is object, it should be the exact instance of the object from the list of Options. For example:

const [test, setTest] = useState("");  //list of options for Material UI select const testOptions = [     {name: "123"},     {name: "456"},     {name: "769"}, ];  //let's try to change value to {name: "123"} using JS setTest(testOptions[0]);    // everything is OK setTest({name: "123"});     // Error! You provided out of range value!