Adding data to array list

hello,
I am trying to add a name to the list of already created array names on the click of the button add user when I type the name in the same input that I use to filter names. I seem to be having difficulty accomplishing this, I would be happy to receive help.

Below is React code.

`import React, { useState } from "react";
import classes from "./Users.module.css";

const DUMMY_USERS = [
{ id: "u1", name: "Ama" },
{ id: "u2", name: "Abena" },
{ id: "u3", name: "Kwame" },
{ id: "u4", name: "Michael" },
];

const Users = () => {
const [showUsers, setShowUsers] = useState(true);
const [filterUsers, setFilterUsers] = useState("");
const [newUser, setNewUser] = useState("");

// console.log(addUser);

const filterHandler = (event) => {
setFilterUsers(event.target.value);
};

const addUser = () => {
let newName = { name: "" };

setNewUser([...newUser, newName]);

};

const search = !filterUsers
? DUMMY_USERS
: DUMMY_USERS.filter((user) =>
user.name.toLowerCase().includes(filterUsers.toLowerCase())
);

const toggleHandler = () => {
setShowUsers((curState) => !curState);
};

const userList = (

{search.map((user) => (
• {user.name}
))} ;

);

return (

name="name"
type="text"
value={filterUsers}
onChange={filterHandler}
/>



{showUsers ? "Hide" : "show"} Users



Add Person

  {showUsers && userList}
  <div>
    <ul>
      {addUser.map((input) => (
        <li key={input.id}>{input.name}</li>
      ))}
    </ul>
  </div>
</div>

);
};

export default Users;
`