React Typescript Autocomplete using a component

Alert: I am a beginner at this. I have a sample component that I want to throw into my render and it is set up like this below....

I have an array that is this...

    this.state.jsonData = [
    {costcenter: "12345", description: "marketing"},
    {costcenter: "44444", description: "accounting"},
    {costcenter: "99999", description: "sales"},
    ]

I want the user to see the description value. In the end the costcenter value will be stored on the server in the db.

    export interface AutoCompleteProps {
    //type: "text" | "number";
    name:string;
    title:string;
    value:string;
    placeHolder:string;
    handleChange?:(e) => void;
    options : Array<{key:string,value:string}>;
    }
    export class AutoComplete extends React.Component<AutoCompleteProps,{}> {

    renderAcItems(): JSX.Element {
        return (
            <ul id="autocomplete" className={'dropdown-menu ac-'.concat(this.props.name)}>
                {this.props.options.map(opt=>{
                    return (
                        <li value={opt.key} onClick={this.props.handleChange}><a href="#">{opt.value}</a> 
    </li>
                    );
                })}
            </ul>
        );
    }
    render(): JSX.Element {
        return (
        <div className="form-group">
            <label className="form-label" htmlFor={this.props.name}>{this.props.title}</label>
            {/*<div className="dropdown" >
                <input 
                    type="text" 
                    id={this.props.name}
                    name={this.props.name}
                    value={this.props.value}
                    onChange={this.props.handleChange}
                    placeholder={this.props.placeHolder} 
                    className="form-control dropdown-toggle"
                    data-toggle="dropdown" 
                />
                {this.props.options.length>0?this.renderAcItems():null}
            </div>*/}
            <input 
                list={"ac".concat(this.props.name)}
                name = {this.props.name}
                id = {this.props.name}
                className = "form-control"
            />
            <datalist
                id = {"ac".concat(this.props.name)}>
                  {this.props.options.map(opt=>{
                    return (
                    <option value={opt.key}>{opt.value}</option>
                    );
                })}
              
            </datalist>
        </div>
        );
    }

    }

I am trying something like this...

 <AutoComplete
              name="costcenter"
              title="some label"
              handleChange={this.handleChange} ?? is it looking for a function we know ???
              value="{this.state.costcenter}" ?? this is the value I want to save
              placeHolder=""
              options="Array<{????}>" ?? I have no idea how to put that in given the interface. I 
know in my data the array is this.state.jsonData which contains objects with 2 properties the key 
being costcenter and the value being description... but how I type it in here is a mystery. 

Sorry for asking but I am a brand new beginner.