Estoy usando el autocompletado de MUI. Y aquí está el código que estoy enviando un JSX Element[] con botones de opción.

Prueba.JSX

 const [selectedValue, setSelectedValue] = React.useState('a'); const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { setSelectedValue(event.target.value); }; <AutoCompleteSelect optionsData={[ { text: 'Last month', element: ( <div> {' '} <Radio checked={selectedValue === 'a'} testid="testRadioWrapper" value={'a'} onChange={(event) => handleChange(event)} /> a </div> ), }, { text: 'Last 10 month', element: ( <div> {' '} <Radio checked={selectedValue === 'b'} testid="testRadioWrapper" value={'b'} onChange={(event) => handleChange(event)} /> b </div> ), }, ]} />

Opciones de recepciónAccesorios de datos para el archivo Autocomplete.jsx.

Autocompletar.JSX

 <Autocomplete disablePortal id="single-select" options={optionsData} data-testid={testid} getOptionLabel={(option) => option.text} open={true} autoHighlight={false} disableClearable renderOption={(props, option, { selected }) => <MenuItem {...props}>{option.element}</MenuItem> } popupIcon={ showList ? ( <i className="icon-UpAlternative" aria-hidden="true" style={{ fontSize: 11, color: Skin.colors.blackLight.value, }} ></i> ) : ( <i className="icon-DownAlternative" aria-hidden="true" style={{ fontSize: 11, color: Skin.colors.blackLight.value, }} ></i> ) } renderInput={(params) => ( <TextField {...params} label="" placeholder="" data-testid="inputSearchFilter" /> )} />

Al representar las opciones y hacer clic en el botón de opción dentro de la lista, aparece un error de tiempo de ejecución. ingrese la descripción de la imagen aquí

¿Alguien sabe por qué pasa esto?