Blank page after filtering a list

[madsongr]

I'm filtering a list of users from my DB according to their names. Now I added react-paginated-list for a better list view.

My itemsPerPage is 10.

Scenario:
When my dashboard loads page number 1 and I pick a name from the dropdown menu, it works fine. I "reset" the full array length so that the filter can check the whole array (not only my itemsPerPage) and display that name even if that name is on the last page.

If I don't "reset" array length I can only display that name if it is on the first page (because it's already listed on page 1).

My issue is:
When my dashboard loads, if I click on page 4 (PaginatedList controls) for example, and I try to pick a name from the dropdown menu that it's not on page 4, it shows a blank page with page number = 1 (PaginatedList controls). I have to click on number 1 (on controls) to display the list with that name. It doesn't display that name automatically as it displays in "Scenario".

export function Users() {

    let usersList: any = [];

    const [user, setUser] = useState("");
    const [active, setActive] = useState("");
    const [usernameFilter, setUsernameFilter] = useState("");

    const [users, setUsers] = useState<any[]>([]);
    const [openUsersList, setOpenUsersList] = useState(false);

    const handleFilterByUser = (e: any) => {

        if (e.target.value !== "") {
            setListLength(users.length);
        }

        if (e.target.value === "") {
            setListLength(10);
        }

        console.log(e.target.value);
        setUsernameFilter(e.target.value);
        setUser(e.target.value);
    }

return (

// dropdown menu
<div className="mt-12 w-full">
   <p className='text-sm'>Filter</p>
   <div className="flex flex-wrap justify-center sm:justify-start gap-2 mt-4 w-full">

      <select className='border border-zinc-300 p-2' value={usernameFilter} onChange={(e) => handleFilterByUser(e)}>
         <option value="" key={0}>Filter by name</option>

         {usersList.concat(users).sort((a: any, b: any) => a.username.localeCompare(b.username)).map((user: any, index: any) => (
         <option key={index} value={user.username}>{user.username}</option>
         ))}
      </select>

   </div>
</div>
<PaginatedList
  list={users}
  itemsPerPage={listLength}
  renderList={(list) => (
    <div className="flex flex-col justify-center sm:justify-start mt-12 w-full">
      {openUsersList &&
        list
          .filter((userVal) => {
            if (user === "" && active === "") {
              return userVal;
            } else {
              if (user !== "" && userVal.username.toLowerCase().includes(user.toLowerCase())) {
                return userVal;
              }
              if (active !== "" && userVal.active.toLowerCase().includes(active.toLowerCase())) {
                return userVal;
              }
              console.log("no cond");
            }
          })
          .map((user, index) => (
            <div
              key={index}
              className="flex flex-wrap justify-center sm:justify-start border border-zinc-300 mt-6 w-full"
            >
              <div className="flex flex-col md:flex-row md:items-center w-full h-fit md:h-24 border-b border-zinc-300">
                <div className="flex items-center w-5/6 h-full p-2 sm:pl-6">
                  <div className="flex flex-col justify-between">
                    <p
                      className="text-blue-900 text-xs uppercase hover:underline cursor-pointer"
                      onClick={() => openUser(user.id)}
                    >
                      <strong>{user.username}</strong>
                    </p>
                    <p className="text-zinc-500 text-xs mt-1">
                      <a href={"mailto:" + user.email}>{user.email}</a>
                    </p>
                    <p className="text-zinc-500 text-xs">
                      <a href={"tel:" + user.clean_phone}>{user.phone}</a>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          ))}
    </div>
  )}
/>;
)
}

It looks like page on controls is not being selected automatically:

just as it is on "Scenario":

How can I fix this? I mean, display picked name without having to click on PaginatedList control.