Обновление массива в dataSource SelectBox'a ReactJS

Совсем недавно начал изучать React и столкнулся с такой проблемой. Необходимо создать SelectBox (именно его) с некоторым функционалом. Функционал заключается в контекстном поиске на основании введенных данных в SelectBox. Итак, есть некий набор данных:

export const lstObj = [
    {id:0, name:"aaaaaaaaaaaaaa"},
    {id:1, name:"aaaaaaaaerfwaa"},
    {id:2, name:"aaaaasdvasdvaa"},
    {id:3, name:"sdvsddxaaaaaaa"},
    {id:4, name:"absdgfsdgsdsdd"},
    {id:5, name:"sdhsdhsthsrthe"}
];

и сам компонент:

import React, {useState} from "react";
import SelectBox from "devextreme-react/select-box";
import { lstObj } from "./componentConst";

const CustomSelectBox = (props) => {
    const [currVal, setCurVal] = useState()
    const [dataSrc, setDataSrc] = useState([]);

    const countRow = 2;

    function onSelectBoxInput(e) {
        const inputText = e.event.target.value;
        
        const newDataSrc = lstObj.filter((data) => {
            return data.name.includes(inputText);
        }).slice(0, countRow);
        setDataSrc(newDataSrc);
    }

    return(<>
    <h1>{currVal}</h1>
    <SelectBox
        dataSource={dataSrc}
        displayExpr={"name"}
        valueExpr={"id"}
        width={580}
        value={currVal}
        searchEnabled={true}
        showDropDownButton={false}
        activeStateEnabled={true}
        onValueChange={setCurVal}
        onInput={onSelectBoxInput}
    />
    </>)
}

export default CustomSelectBox;

Дело в том, что поле добавления строки setDataSrc(newDataSrc); в поле SelectBox'a невозможно ввести более одного символа, при этом этот символ не отображается.
Ввел символ a затем ввел символ 1

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