I want to make a table for user email lists. but when I create new email(click add user btn), users state doesn't update. could you help me to fix this issue? thank you

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;