ReactJs AutoComplete not showing on the dropdown using antd

I am creating a component with auto-search using API. searching values are successfully console logging. but not display on the auto search dropdown on react class component.

following is the method what I have tried.

class AutoCompleteModel extends Component {

  state = {
    autcompleteOptions: [],
  };

  onSearchAutoComplete = async (text) => {
    console.log(text);
    await http
      .get("contact/autcomplete/" + text)
      .then((response) => {
        let i = response.data.result;
        this.setState({
          autcompleteOptions: i,
        });
        console.log(this.state.autcompleteOptions);
      })
      .catch((e) => {
        console.log(e);
      });
  };

  render() {
    let { autcompleteOptions } = this.state;

    return (
      <>
        <Row>
          <Col
            xl={6}
            lg={6}
            md={6}
            sm={6}
            xs={24}
          >
            <AutoComplete
              options={this.state.autcompleteOptions}
              style={{
                width: "100%",
              }}
              placeholder="Auto complete search"
              onSearch={this.onSearchAutoComplete}
            >
           </AutoComplete>
          </Col>
        </Row>
      </>
    );
  }
}

export default AutoCompleteModel;

suggest me the best way to solve this issue