ReactJS: Search Bar Implementation - json

Question

I want to implement a search bar in my reactJS which takes query in the search bar and show the matching assets from the API with that query till it is finished and rendering it.
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;
How to render all the matching location_uuids till the last one.
Then render the keys and values of the last one. I am new to ReactJS and tried other solutions. Can anybody help me with this?