Tengo 4 campos numéricos y un campo de búsqueda encima de ellos.

Mi objetivo es mostrar solo los campos buscados, como si alguien escribiera en el campo de búsqueda "verde" ... luego solo mostrar NumberField2 con la etiqueta "verde".

¿Alguna idea de cuál es la forma más fácil de hacerlo funcionar?

 
 <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>