Quiero hacer una tabla para las listas de correo electrónico de los usuarios. pero cuando creo un nuevo correo electrónico (haga clic en Agregar usuario btn), el estado de users no se actualiza. ¿podrían ayudarme a solucionar este problema? gracias

 import React, {useState} from 'react'; const Admin: NextPage = () => { const [users, setUsers] = useState([ { email: "xxx@test.com" }, { email: "bbb@test.com"}, ]); const [email, setEmail] = useState(''); const removeUser = rowEmail => { const updatedArray = users.filter((row) => row.email !== rowEmail); setUsers(updatedArray); } const addUser = () => { console.log(email); const lists = users; lists.push({'email' : email}); setUsers(lists); } return ( <> <div className="user-user"> <input type="email" onChange={event => setEmail(event.target.value)} /> <span onClick={() => addUser()}>Add User</span> </div> <div className="user-list"> <table> <thead> <tr> <th>Users</th> <th>Action</th> </tr> </thead> <tbody> {users.map((val, key) => { return ( <tr key={key}> <td>{val.email}</td> <td><span onClick={() => removeUser(val.email)}>Remove</span></td> </tr> ) })} </tbody> </table> </div> </> ); } export default Admin;