For is not Reactive ?

<ul
  tabIndex={0}
  class={`dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52`}
>
  <For each={filters()}>
    {(f) => (
      <li>
        <div
          onClick={() => toggleFilter(f.id)}
          class="flex justify-between"
        >
          <p>{f.label}</p>
          {f.selected ? <FaSolidCheck size={12} /> : null}
        </div>
      </li>
    )}
  </For>
</ul>

  const [filters, setFilters] = createSignal([
    { id: 'active', label: 'Active', selected: true },
    { id: 'terminated', label: 'Terminated', selected: false },
  ]);

  const toggleFilter = (id: string) => {
    console.log('before', filters()[0].selected);

    setFilters(
      filters().map((f) => {
        if (f.id === id) {
          f.selected = !f.selected;
        }

        return f;
      }),
    );

    console.log('after', filters()[0].selected);
  };