Как создать поле поиска с эластичным пользовательским интерфейсом и реагировать?

Question

У меня есть 4 числовых поля и поле поиска над ними.

Моя цель - показать только искомые поля, например, кто-то вводит в поле поиска "зеленый"... затем отображает только NumberField2 с меткой "зеленый".

Любые идеи, как проще всего заставить его работать?

      
 <Segment>
    <EuiFieldSearch
        placeholder="Search..."
    />
    <EuiFlexGroup id="myForm">
        <EuiFlexItem grow={3}>
            <EuiFormRow class="myFormInput" label="blue">
                <EuiFieldNumber
                    className='new-budget-input'
                    step={1}
                    min={1}
                    name="NumberField1"
                    aria-label="Use aria labels when no actual label is in use"
                    onChange={(e) => handleInputChange(e)}
                />
            </EuiFormRow>
            <EuiFormRow class="myFormInput" label="green">
                <EuiFieldNumber
                    className='new-budget-input'
                    step={1}
                    min={1}
                    name="NumberField2"
                    aria-label="Use aria labels when no actual label is in use"
                    onChange={(e) => handleInputChange(e)}
                />
            </EuiFormRow>
            <EuiFormRow class="myFormInput" label="red">
                <EuiFieldNumber
                    className='new-budget-input'
                    step={1}
                    min={1}
                    name="NumberField3"
                    aria-label="Use aria labels when no actual label is in use"
                    onChange={(e) => handleInputChange(e)}
                />
            </EuiFormRow>
            <EuiFormRow class="myFormInput" label="yellow">
                <EuiFieldNumber
                    className='new-budget-input'
                    step={1}
                    min={1}
                    name="NumberField4"
                    aria-label="Use aria labels when no actual label is in use"
                    onChange={(e) => handleInputChange(e)}
                />
            </EuiFormRow>
        </EuiFlexItem>
    </EuiFlexGroup>
</Segment>