MUI 5.12.0多值Autocomplete初始化后默认值变更警告求助

我使用MUI 5.12.0版本，开发的多值Autocomplete组件渲染后出现如下警告：

MUI：一个组件在初始化后正在更改非受控Autocomplete的默认值状态。要抑制此警告，请选择使用受控Autocomplete。

我查阅了相关问题但未找到合适的解决方案，以下是错误追踪信息：

Autocomplete (webpack-internal:///./node_modules/@mui/material/Autocomplete/Autocomplete.js:399:83)
    at FilterMultiSelect (webpack-internal:///./src/components/filters/FilterMultiSelect.tsx:51:20)
    at Filter (webpack-internal:///./src/components/filters/Filter.tsx:28:20)
    at div

附上我的组件代码：

import React from 'react';

import {
    SelectChangeEvent,
} from '@mui/material';
import Autocomplete from '@mui/material/Autocomplete';
import Checkbox from '@mui/material/Checkbox';
import TextField from '@mui/material/TextField';
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import CheckBoxIcon from '@mui/icons-material/CheckBox';

import {
    IMultiSelectFilter,
    IMultiSelectFilterItemValue,
    IMultiSelectFilterValue,
} from '../../interfaces/filter';

const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
const checkedIcon = <CheckBoxIcon fontSize="small" />;

export interface IFilterMultiSelectProps {
    data: IMultiSelectFilter;
    value: IMultiSelectFilterValue;
    onChangeValue?: (event: { filter: IMultiSelectFilter, value: IMultiSelectFilterValue }) => void;
}

function FilterMultiSelect(props: IFilterMultiSelectProps) {
    const { data, value, onChangeValue } = props;

    const updateValue = (newValue: IMultiSelectFilterValue) => {
        if (onChangeValue) {
            onChangeValue({ filter: data, value: newValue });
        }
    };
    const handleChange = (event: SelectChangeEvent<string | number>, newValue: IMultiSelectFilterItemValue[]) => {
        const values = newValue.map(({ value }) => value);

        // @ts-ignore
        updateValue(values);
    };
    const isOptionEqualToValue = (option: any, value: any) => {
        if (Array.isArray(value)) {
            // eslint-disable-next-line no-restricted-syntax
            for (const v of value) {
                if (option.value === v.value) {
                    return true;
                }
            }

            return false;
        }

        return option.value === value.value;
    };

    const defaultValues: IMultiSelectFilterItemValue[] = data.items.filter(
        (item) => value.includes(item.value.toString()),
    );

    return (
        <Autocomplete
            fullWidth
            multiple
            id="countries-tags"
            // @ts-ignore
            onChange={handleChange}
            // @ts-ignore
            options={data.items}
            isOptionEqualToValue={isOptionEqualToValue}
            disableCloseOnSelect
            // @ts-ignore
            getOptionLabel={(option) => option.label}
            renderOption={(props, option, { selected }) => (
                <li {...props}>
                    <Checkbox
                        icon={icon}
                        checkedIcon={checkedIcon}
                        style={{ marginRight: 8 }}
                        checked={selected}
                    />
                    {
                        // @ts-ignore
                        option.label
                    }
                </li>
            )}
            renderInput={(params) => (
                <TextField {...params} label={data.name} placeholder={data.name} />
            )}
            // @ts-ignore
            defaultValue={defaultValues}
            // value={value}
        />
    );
}

export default FilterMultiSelect;

请问有没有人遇到过类似情况？该如何解决这个警告？

内容的提问来源于stack exchange，提问作者Yuri R