Autocomplete feature shows [Object object] - reactjs

Question

i am trying to implement auto complete feature in react JS.
it shows the autocomplete box, but shows [Object Object] for some reason, I have no idea why. I want it to show the email in the search box so as to implement autocomplete feature.
I would like to share my source code
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './Home.css'
const SearchRepo = () => {
const [users, setUsers] = useState([]);
const [text, setText] = useState('');
const [suggestions, setSuggestions] = useState([]);
const onChangeHandler = (text) =>{
//setSeachUser(e.target.value);
let matches = []
if(text.length > 0){
matches = users.filter(user =>{
const regex = new RegExp(`${text}`,"gi");
return user.email.match(regex);
})
}
setSuggestions(matches);
setText(text);
}
useEffect(()=>{
const loadUsers = async()=>{
const response = await axios.get('https://reqres.in/api/users');
setUsers(response.data.data);
}
loadUsers();
},[])
return (
<div align="center">
<table border="0" width="100%" height="212px">
<tr>
<td bgcolor="#C0C0C0" height="55px"> <b>
<font face="Berlin Sans FB" color="#333333">Github Repo Search</font></b></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="center">
<table border="0" width="100%" className="SearchTable">
<div align="center">
<input type="text" placeholder=" Enter github repo ID / username" name="T1" size="88" value={text} onChange={e =>onChangeHandler(e.target.value)} className="inputArea" />
{suggestions && suggestions.map((suggestion,i)=>{
<div key={i}>{suggestion.email}</div>
})}
</div>
</table>
</div>
<div align="center">
<table border="0" width="100%" className="reposresultsTable">
<div align="left">
<tr>
<td bgcolor="#FFFFFF"> <b>
<font face="Verdana" size="2" className="labeltxt"><h3> Repos</h3></font></b>
</td>
</tr>
</div>
<div align="left">
<tr>
<td height="23"> <b>
<font face="Verdana" size="2">
<a href="https://test-restapi2.herokuapp.com/employees/">
mmmmmmmm</a></font></b></td>
</tr>
</div>
</table>
</div>
</td>
</tr>
</table>
</div>
);
}
export default SearchRepo;
why would it be showing that Object rather than the email? Please is there something i am not getting rightly?

Answer 1

Thanks guys, the issue was with a Curly brace. I have been able to resolve it. Thanks everyone.
Changing from this :
<div align="center">
<input type="text" placeholder=" Enter github repo ID / username" name="T1" size="88" value={text} onChange={e =>onChangeHandler(e.target.value)} className="inputArea" />
{suggestions && suggestions.map((suggestion,i)=>{
<div key={i}>{suggestion.email}</div>
})}
</div>
to this
<div align="center">
<input type="text" placeholder=" Enter github repo ID / username" name="T1" size="88" value={text} onChange={e =>onChangeHandler(e.target.value)} className="inputArea" />
{suggestions && suggestions.map((suggestion,i)=>
<div key={i}>{suggestion.email}</div>
)}
</div>