Trying to filter an array using checkboxes and useState, checkbox doesn't stay checked

i have an array, called reportsData, then i need to filter it, generating some checkboxes with each of them having a label based on each name that comes from another array (emittersData), so basically i set it like this:

const [searchUser, setSearchUser] = useState<string[]>([])

const mappedAndFiltered = reportsData
  .filter((value: any) =>
    searchUser.length > 0 ? searchUser.includes(value.user.name) : true
  )

Then i render my checkboxes like this:

function EmittersCheckboxes () {
    const [checkedState, setCheckedState] = useState(
      new Array(emittersData.length).fill(false)
    )

    const handleOnChange = (position: any, label: any) => {
      const updatedCheckedState = checkedState.map((item, index) =>
        index === position ? !item : item
      )

      setSearchUser((prev) =>
        prev.some((item) => item === label)
        ? prev.filter((item) => item !== label)
        : [...prev, label]
      ) 
      setCheckedState(updatedCheckedState)
    };

    return (
      <div className="App">
        {emittersData.map((value: any, index: any) => {
          return (
            <li key={index}>
              <div className="toppings-list-item">
                <div className="left-section">
                  <input
                    className="h-4 w-4 focus:bg-indigo border-2 border-gray-300 rounded"
                    type="checkbox"
                    id={`custom-checkbox-${index}`}
                    name={value.Attributes[2].Value}
                    value={value.Attributes[2].Value}
                    checked={checkedState[index]}
                    onChange={() => handleOnChange(index, value.Attributes[2].Value)}
                    />
                  <label className="ml-3 font-medium text-sm text-gray-700 dark:text-primary" htmlFor={`custom-checkbox-${index}`}>{value.Attributes[2].Value}</label>
                </div>
              </div>
            </li>
          );
        })}
      </div> 
    )
  }

And on the react component i am rendering each checkbox, that is a li, like:

<ul><EmittersCheckboxes /></ul>

And i render the mappedAndFiltered on the end.

Then it is fine, when i click each generated checkbox, it filters the array setting the state in setSearch user and the array is filtered.

You can check it here: streamable. com /v6bpk6 See that the filter is working, the total number of items in the array is changing based on the checkbox selected (one or more).

But the thing is that each checkbox does not become 'checked', it remains blank (untoggled).

What am i doing wrong, why doesnt it check itself?