Input value - onChange vs Manual

I'm trying to pass an array of strings via context api from a child to a parent.

I've been doing so through input who push the value written in it to another input that displays all the values pushed by the first one.

( Simply to show the user his values ).

the problem is - the onChange method doesn't fire up when the value gets pushed to that input, and only fires when i manually write on that input.

The midWay function should fire up when the value is changed thought it's "value" prop.

midWay = (e: any) => {
    const {
        target: {
            name,
            value
        },
    } = e;
    const {
        takeValue
    } = this.props;
    if (takeValue) {
        takeValue(name, value);
    }
};

handleChange = (e: any) => {
    const {
        list,
        tempVal,
        value
    } = this.state;
    let {
        listValue,
        read
    } = this.props;
    this.setState({
        list: list.concat([`${tempVal}`]),
    });
    listValue = list;
    if (tempVal.length > 0) {
        this.setState({
            length: true
        });
    }
    if (list.length > 4) {
        read = true;
    }
    this.setState({
        value: '',
    });
    e.preventDefault();
};

getTags = (e: any) => {
    const {
        list,
        tempVal
    } = this.state;
    let {
        listValue
    } = this.props;
    const {
        target: {
            name,
            value
        },
    } = e;
    const {
        changeValue
    } = this.props;
    listValue = list;
    if (changeValue) {
        changeValue(name, value);
    }
    this.setState({
        tempVal: value
    });
};

render() {
    const {
        value,
        list,
        length,
        tags
    } = this.state;
    const {
        Header,
        inputName,
        type,
        read
    } = this.props;
    let {
        listValue
    } = this.props;
    listValue = list;
    return ( <
        TagsContextConsumer > {
            ({
                tags,
                changeValue,
                takeValue
            }) => ( <
                Row >
                <
                W20 >
                <
                form className = "container"
                noValidate autoComplete = "on">
                <
                TextField id = "standard-name"
                name = "tags"
                label = "Your Tags"
                className = "textFields"
                value = {
                    listValue
                }
                margin = "normal"
                InputProps = {
                    {
                        readOnly: read,
                    }
                }
                type = "text"
                onChange = {
                    this.midWay
                }
                /> <
                hr / >
                <
                TextField id = "standard-name"
                name = {
                    inputName
                }
                label = {
                    Header
                }
                className = "textFields"
                value = {
                    value
                }
                margin = "normal"
                InputProps = {
                    {
                        readOnly: read,
                    }
                }
                type = {
                    type
                }
                onChange = {
                    this.getTags
                }
                />

                <
                RegularButton onClick = {
                    this.handleChange
                } > Add < /RegularButton> <
                /form> <
                /W20> <
                /Row>
            )
        } <
        /TagsContextConsumer>
    );
}