How to retain checked value when filtering list

I have a filtering function 'filterUsers' working on the 'filteredUsers' array of objects. Each object is rendered as a list item with some data and a checkbox. The function is fired every time the user changes the text input value. If an item is checked when filtered out the checked value is lost. I need a solution to retain the checked value.

const UsersList = () => {
const { users } = useContext(UsersContext);
const [checkedUsersIds, setCheckedUsersIds] = useState([]);
const [filteredUsers, setFilteredUsers] = useState([]);

useEffect(() => setFilteredUsers(users), [users]);
useEffect(() => console.log(checkedUsersIds), [checkedUsersIds]);

const checkUsers = async e => {
    if (e.target.checked) {
        const checkedUser = users.find(user => user.id === Number(e.target.name));
        setCheckedUsersIds([...checkedUsersIds, checkedUser.id]);
    } else {
        setCheckedUsersIds(checkedUsersIds.filter(user => user !== Number(e.target.name)));
    }
};

const filterUsers = e => {
    setFilteredUsers(
        users.filter(
            user =>
                user.first_name.toLowerCase().includes(e.target.value.toLowerCase().trim()) ||
                user.last_name.toLowerCase().includes(e.target.value.toLowerCase().trim())
        )
    );
};

return (
    <>
        <input
            type="text"
            name="filter_users"
            className={classes.filter_input}
            onChange={e => filterUsers(e)}
            placeholder="search user..."
            autoComplete="off"
        />

        <ul>
            {filteredUsers.length ? (
                filteredUsers.map(user => {
                    return (
                        <label key={user.id} htmlFor={user.name}>
                            <li className={classes.user_container}>
                                <div className={classes.user_subcontainer}>
                                    <div
                                        className={`${classes.avatar_container} ${
                                            user.gender === 'Male' ? classes.male : classes.female
                                        }`}
                                    >
                                        {user.avatar ? (
                                            <img className={classes.avatar} src={user.avatar} alt="#" />
                                        ) : (
                                            <div className={classes.img_alt}>
                                                {user.first_name.slice(0, 1)}
                                                {user.last_name.slice(0, 1)}
                                            </div>
                                        )}
                                    </div>
                                    <h3
                                        className={user.gender === 'Male' ? classes.male_text : classes.female_text}
                                    >
                                        {user.first_name} {user.last_name}
                                    </h3>
                                </div>
                                <div className={classes.checkbox_container}>
                                    <input type="checkbox" name={user.id} onChange={e => checkUsers(e)} />
                                </div>
                            </li>
                        </label>
                    );
                })
            ) : (
                <h1 className={classes.list_loading}>List loading...</h1>
            )}
        </ul>
    </>
);

};