Реагировать на динамическую панель поиска, не обновляющую список после выбора товара в приложении корзины покупок

Я пытаюсь написать приложение корзины покупок, которое, когда мы вводим значение в строку поиска, должно обновлять список и показывать доступный элемент на основе введенного значения. С кодом, который я написал, все работает нормально, пока я не выбрал элемент, который не обновляет представление в первый раз и не отображает все каналы (я думаю, что состояние не обновляется в первый раз, но выполняется во второй раз)

Я новичок, чтобы отреагировать. Я попытался добавить сюда только необходимый код для решения.

state = { open: false, value: '', filteredSections: 'none', displaySections: [] };

filterFunction(e, someSections) {
    const filteredSections = [];
    this.setState({ value: e.target.value });
    someSections.forEach((category) => {
        const results = [];
        const itemCopy = {...category};
        category.arraysinside.forEach((item) => {
            if (item.name.toLowerCase().includes(e.target.value.toLowerCase())) { results.push(item); }
        });
        itemCopy.arraysinside = results;
        if (itemCopy.arraysinside.length > 0) { filteredSections.push(itemCopy); }
    });
    this.setState({ filteredSections: filteredSections });
    return filteredSections;
}
updateFunction(displaySections) {
    this.setState({ displaySections: displaySections });
}
onChange(opt) {
    // makes item selected and changes color of item to know that item is selected
}
render() {
    const someSections = customization.arraysinside.filter(c => c.has === 'channels');
    let { displaySections, filteredSections } = this.state;
    return (
        <div>
         <FormControl
             name = "search-items"
             placeholder = "Search items"
             onChange = {(e) => {
             filteredSections = this.filterFunction(e, someSections);
                                this.setState({
                                    displaySections: filteredSections.length > 0 ? displaySections = filteredSections : 'No',
                                    value: this.state.value,
                                });
                            }}
                        />
            <div>
                {displaySections.length > 0 ? displaySections.map(section =>
                    <someSections
                        onChange = {(opt) => {
                            onChange(opt);
                            this.updateFunction(opt, displaySections);
                        }}
                 :
                    someSections.map(section =>
                        <someSections
                            onChange = {opt => onChange(opt)}
                         />)
                }
            </div>
        </div>
    );
}
}

ФОРМАТ JSON БУДЕТ

{
  "name": "product 1",
  "has": "channels",
  "arraysinside": [
    { "selected": false, "name": "Item 1"},
    { "selected": false, "name": "Item 2"},
    { "selected": false, "name": "Item 3"},
    { "selected": false, "name": "Item 4"},
  ],
},
{
  "name": "product 2",
  "has": "channels",
  "arraysinside": [
    { "selected": false, "name": "Item 1"},
    { "selected": false, "name": "Item 2"},
    { "selected": false, "name": "Item 3"},
    { "selected": false, "name": "Item 4"},
  ],
},

displaySections следует обновлять каждый раз, когда я выбираю элемент, и он должен мгновенно менять вид, но с текущим кодом он обновляется, когда я в следующий раз ввожу другое значение или обновляю выбор. Пожалуйста, помогите, я пробовал это в течение нескольких дней без улучшений. Буду рад, если предложит способ попроще чем я написал.