Родительская дочерняя проблема в React

У меня есть родительский компонент, в котором я настраиваю состояние, вызываю дочерний компонент, принимаю значение от дочернего и снова отправляю его родителю и устанавливаю значение.

class Parent extends Component {
    constructor(props) {
        super(props);
        this.onInputChange = this.onInputChange.bind(this);

        this.state = {
            value: ""
        };
    }

    emailList = [
        {
            label: "Alen Musk",
            text: "[email protected]"
        },
        {
            label: "John smith",
            text: "[email protected]"
        },
        {
            label: "Jacky shroff",
            text: "[email protected]"
        },
        {
            label: "Bruce wayne",
            text: "[email protected]"
        }
    ];

    onInputChange(value) {
        this.setState({ value: value });
    }

    render() {
        return (
            <div>
                             
                    <InputSuggestionsComponent
                        label = "Email"
                        value = {this.state.value}
                        typeaheadItems = {this.emailList} 
                        lookupKey = "text" 
                        onChange = {this.onInputChange}
                    />
                
               
            </div>
        );
    }
}

export default Parent;

Дочерний компонент:

<Field
    onFocus = {this.setFocus}
    onBlur = {this.onBlurHandler}
    onKeyDown = {this.onKeyDown}
    disabled = {this.props.disabled}
    value = {this.props.value}
    onChange = {this.changeHandler}
    onSelect = {this.onSelectHandler}
    required
    name = {label}
    type = {fieldType}
    textColor = {currentTheme.text}
    buttonMovable = {this.props.type === "password"}
/>

changeHandler = e => {
  this.props.onChange(e.target.value);
  this.checkTypeAhead(this.props.value);
};

setTypeAhead = value => {
    console.info("props value in settypeahead", this.props.value);
    console.info(" value in settypeahead", value);
    const {
        typeaheadItems,
        lookupKey
    } = this.props;
    this.setState({
        showSuggestions: true,
        selectedIndex: null,
        suggestions: typeaheadItems.filter(
          item => (lookupKey ? item[lookupKey] : item).toLowerCase().indexOf(value.toLowerCase()) === 0
        )
    });
};


checkTypeAhead(value) {
    //console.info("check for typeahead ", this.props);
    if (this.props.typeaheadItems && this.props.lookupKey) {
        this.setTypeAhead();
    }
    this.props.onChange(value);
}

Теперь, что происходит, вызывается мой дочерний обработчик onChange, где я беру значение из e.target.value и отправляю его родительскому элементу для обновления в this.state.props, после чего открывается мой список предложений.

Но что касается первого раза, я получаю this.props.value как "", поскольку он был установлен в родительском элементе. Что делать, если я хочу принять ценность как тип использования?

Например: если пользователь вводит «а», я должен получить «а» в this.props.value.