Extract Refactoring in React App Project doesn't replace code duplicates?

I have worked extensively in IntelliJ Environments with Scala Play Projects. Usually whenever I extract a method to class it replaces all the semantic equivalents with the extracted method. However, doing the same in Webstorm React App Project doesn't produce the desirable result.

I have a class which has the following method

handleDeleteSubmit(event) {

    event.preventDefault();

    if (/^[a-zA-Z]+$/.test(event.target.del_val.value) && this.keyList.indexOf(event.target.del_val.value) !== -1) {
        var index = this.keyList.indexOf(event.target.del_val.value);
        this.keyList.splice(index, 1);
        this.valList.splice(index, 1);
        ReactDOM.render(<ProductDetailsViewport keyList={this.keyList}
                                                valList={this.valList}/>, document.getElementById("product_details_viewport"));
    } else {
        alert("Non-Existent Key Value");
    }
}

When I extract refactor the following line 

event.target.del_val.value

to a method in class I expect the following result like in other IntelliJ like IDE projects.

handleDeleteSubmit(event) {

    event.preventDefault();

    if (/^[a-zA-Z]+$/.test(this.getToDeleteValue(event)) && this.keyList.indexOf(this.getToDeleteValue(event)) !== -1) {
        var index = this.keyList.indexOf(this.getToDeleteValue(event));
        this.keyList.splice(index, 1);
        this.valList.splice(index, 1);
        ReactDOM.render(<ProductDetailsViewport keyList={this.keyList}
                                                valList={this.valList}/>, document.getElementById("product_details_viewport"));
    } else {
        alert("Non-Existent Key Value");
    }
}

getToDeleteValue(event){
    return event.target.del_val.value;
}

I need a way to resolve this issue.

I have tried changing language preferences to Flow, React JSX, ECMAScript 6 but to no avail.