AutoComplete:<li> cannot appear as a descendant of <li> when using ListItem in renderOption

Hi guys, I have this boring warning when using a ListItem object as renderOption: Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>.

Can’t find how to bypass it. Any idea?

import {
	ListItem as MUIListItem,
	ListItemProps,
	TextField,
} from "@material-ui/core";
import RemoveIcon from "@material-ui/icons/RemoveCircleOutlineSharp";
import Autocomplete from "@material-ui/lab/Autocomplete";
import React, { useState } from "react";
import { ITextFieldProps } from "../InputField/BaseInputField";
import Chip from "./../Chip";

export interface IOptionsValue {
	value: string;
	label: string;
}

interface IMultiSelectChipsProps {
	options: IOptionsValue[];
}

export interface IListItem extends ListItemProps {
	option: IOptionsValue;
}

const ListItem: React.FC<IListItem> = (props: IListItem): JSX.Element => {
	return (
		<MUIListItem key={props.option.value} value={props.option.value}>
			{props.option.label}
		</MUIListItem>
	);
};

const MultiSelectChips: React.FC<IMultiSelectChipsProps> = (
	props: IMultiSelectChipsProps
) => {
	const [val, setVal] = useState<IOptionsValue[]>([]);

	return (
		<div style={{ width: 500 }}>
			<Autocomplete
				multiple
				id="tags-standard"
				freeSolo
				filterSelectedOptions
				options={props.options}
				onChange={(_, newValue: IOptionsValue[]) => setVal(newValue)}
				getOptionLabel={(option: IOptionsValue) => option.label}
				renderTags={(value: IOptionsValue[]) =>
					value.map((option: IOptionsValue, index: number) => (
						<Chip
							key={index}
							label={option.label}
							deleteIcon={<RemoveIcon />}
							onDelete={() => {
								setVal(val.filter(entry => entry !== option));
							}}
						/>
					))
				}
				value={val}
				renderInput={(params: ITextFieldProps) => (
					<TextField
						{...params}
						variant="standard"
						placeholder="Select..."
						margin="normal"
						fullWidth
					/>
				)}
				renderOption={(option: IOptionsValue) => (
					<ListItem option={option} />
				)}
				{...props}
			/>
		</div>
	);
};

export default MultiSelectChips;

[oliviertassinari]

The alternative is to set a component=“div” on the list item to clear the warning.

[oliviertassinari]

@ImanMahmoudinasab See #19254 for a proper fix, in case you want to work on it.