import React from 'react';
import { TextField, Autocomplete, Checkbox } from "@mui/material";
import CheckBoxIcon from '@mui/icons-material/CheckBox';
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import FormControl from '@mui/material/FormControl';
import { DataGridPro } from '@mui/x-data-grid-pro';

function CustomFilter() {

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

    return (
        <FormControl variant="standard" sx={{ m: 1, width: '100%', margin: 0 }} fullWidth>
            <Autocomplete
                limitTags={0}
                getLimitTagsText={(more) => `Selected: ${more}`}
                multiple
                disableCloseOnSelect
                id='autoCompleteComponent'
                name='autoCompleteComponent'
                key="autoCompleteComponent"
                options={[100, 200, 300, 400, 500, 600, 700, 800, 900]}
                size="medium"
                fullWidth
                sx={{ width: '100%' }}
                renderTags={(value) => value.map(() => null)}
                renderOption={(props, option, { selected }) => {
                    const { key: propsKey, ...propsWithoutKey } = props
                    return <li key={propsKey} {...propsWithoutKey}>
                        <Checkbox
                            icon={icon}
                            checkedIcon={checkedIcon}
                            style={{ marginRight: 8 }}
                            checked={selected}
                        />
                        {option}
                    </li>
                }}
                renderInput={(params) => {
                    const { InputLabelProps, ...newParams } = params;
                    return (
                        <TextField
                            {...newParams}
                            key="testField"
                            variant="outlined"
                            size="small"
                            fullWidth
                            sx={{ width: '100%', padding: '10px 0' }}
                            value={[100, 200, 300, 400, 500, 600, 700, 800, 900]}
                        />)
                }}
            />
        </FormControl>)
}

export function AutoCompleteTest() {

    const initialState = {
        filter: {
            filterModel: {
                items: [
                    {
                        id: 'id',
                        field: 'ID',
                        operator: 'isAnyOf',
                        value: [100, 200, 300, 400, 500, 600, 700, 800, 900]
                    }
                ],
            }
        }
    }

    return (
        <DataGridPro
            unstable_headerFilters
            columns={[
                {
                    field: 'id', headerName: 'ID', flex: 1, renderHeaderFilter: (params) => (
                        <CustomFilter {...params} />
                    )
                },
                { field: 'firstName', headerName: 'First name', width: 150 },
                { field: 'lastName', headerName: 'Last name', width: 150 },
                { field: 'age', headerName: 'Age', type: 'number', width: 110 },
                { field: 'fullName', headerName: 'Full name', description: 'This column has a value getter and is not sortable.', sortable: false, width: 160 },
            ]}
            rows={[{ id: 100, lastName: 'Snow', firstName: 'Jon', age: 35 }, { id: 200, lastName: 'Lannister', firstName: 'Cersei', age: 42 }, { id: 300, lastName: 'Lannister', firstName: 'Jaime', age: 45 }, { id: 400, lastName: 'Stark', firstName: 'Arya', age: 16 }, { id: 500, lastName: 'Targaryen', firstName: 'Daenerys', age: null }, { id: 600, lastName: 'Melisandre', firstName: null, age: 150 }, { id: 700, lastName: 'Clifford', firstName: 'Ferrara', age: 44 }, { id: 800, lastName: 'Frances', firstName: 'Rossini', age: 36 }, { id: 900, lastName: 'Roxie', firstName: 'Harvey', age: 65 }]}
            rowId="id"
            in
        />
    )
}

I´m trying to have a AutoComplete where a the input is a TextField. For the user, it could be possible to select from a dropdown or find for the option name and then select it. The problem is that while typing the option name for the first time, it rerenders the component. After such first renrender, it works as expected.