Autocomplete material UI component with formik is loading with errors and warnings

Question

I have written a sample code for Autocomplete component from Material UI in next JS with formik. But I see some errors and warnings at the load. I have tried several solutions from the internet, but nothing seems to work! Could someone help me understand what the issue is and how to get that resolved? I have shared the code in the link for your reference. https://github.com/SamplesForMurthy/formiksample.

Error: useAutocomplete.js:141 Material-UI: The getOptionLabel method of Autocomplete returned undefined instead of a string for "".

and

Warning: useAutocomplete.js:249 Material-UI: The value provided to Autocomplete is invalid. None of the options match with "". You can use the getOptionSelected prop to customize the equality test.

Answer 1

when you pass the empty string as a value , AutoComplete will try to compare the selected value with the list of options and checks whether there is any option which matches with your selected value .

Pass the initial value as null instead of empty string.

const initialValues = {
  selectedValue: null,
};