ReactJS: реализация панели поиска

Question

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

import React, { Component } from 'react';

interface ApiResponse {
    data: Asset[];
}

interface FetchDataExampleState
{
    query: string;
    assets: Asset[];
}

  // The interface for our Language model.
interface Asset 
{
    city: string;
    country: string;
    lane_number: string;
    location_uuid: string;
    pin: string;
    id: BigInt;
}

class Search extends Component<{}, FetchDataExampleState> {

    constructor(props) {
        super(props)
        this.state = {
            query: '',
            assets: []
        }
    }


    componentDidMount() {
        this.serachPeople(this.state.query);
    }

    onChange(e) {
        this.setState({ query: e.target.value }, () => {
            if (this.state.query && this.state.query.length > 1) {
                if (this.state.query.length % 2 === 0) {
                    this.serachPeople(this.state.query);
                }
            } else {
                this.serachPeople(this.state.query);
            }
        })
    }

    serachPeople(query) {
        const url = "/api/locations";

        if (query) {
            fetch(url, {
                method: 'GET'
            })
            .then(response => response.json() as Promise<ApiResponse>)
            .then(data => {
                console.log(data.data) 

// This is showing 0: {city: "bangalore", country: "india", id: 1, lane_number: "10", location_uuid: "1158", …}
//I have to search for location_uuid and show the row


        }


   }

    render() {
        return (
            <form>
                <input
                    type="text"
                    className="search-box"
                    placeholder="Search for..."
                    onChange={this.onChange.bind(this)}
                />
                {this.state.assets}
            </form>
        )
    }
}

export default Search;

Как отобразить все соответствующие location_uuids до последнего. Затем визуализируйте ключи и значения последнего. Я новичок в ReactJS и пробовал другие решения. Кто-нибудь может мне помочь с этим?