Well AutoComplete is an input component. What you need is select with search. The example you provided can be implemented a bit to make it work as you want. You might need to make some modifications. The below code is just to demonstrate how you can change it, not sure if it will run without errors or not.

import { Select } from 'antd';

const { Option } = Select;

function onChange(value) {
  console.log(`selected ${value}`);
}

const options = [
  { label: "hello", value: "1" },
  { label: "codesandbox", value: "2" },
  { label: "react", value: "3" },
  { label: "nodejs", value: "4" },
  { label: "java", value: "5" },
  { label: "antd", value: "6" },
  { label: "dependency", value: "7" },
  { label: "less", value: "8" }
];

function onSearch(val) {
  console.log('search:', val);
}

ReactDOM.render(
  <Select
    showSearch
    placeholder="Select a person"
    optionFilterProp="children"
    onChange={onChange}
    onSearch={onSearch}
    filterOption={(input, option) =>
      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  >
    { options.map((option => <Option value={option.value}>{option.hellop}</Option>)) }
  </Select>,
  mountNode,
);

As @TheWhiteFang answered, one solution to solve your problem is using Select component with showSearch prop, but if you want to use AutoComplete one another solution could be defining two seprate states, one state for input value and another state for selectedOption from AutoComplete. Then you could manage your states by onChange and onSelect props. like this:

const Complete = () => {
  const [selectedOption, setSelectedOption] = React.useState('');
  const [inputValue, setInputValue] = React.useState('');

  const onSelect = (data, option) => {
    setSelectedOption(option);
    setInputValue(option.label);
  };

  const onChange = (data, option) => {
    setInputValue(data);
    setSelectedOption(option); // to remove selected option when user types  something wich doesn't match with any option
  };

  return (
   <AutoComplete
        value={inputValue}
        options={options}
        autoFocus={true}
        style={{width: 200}}
        filterOption={(inputValue, option) =>
          option.label.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
        }
        onSelect={onSelect}
        onChange={onChange}
      />
  );
};

Maybe you need to make some changes in above example by your requirement, anyway you can find above example Here on stackblitz.