Reactive conditional rendering based on Store of objects

import { For, type Component } from "solid-js";
import { createStore } from "solid-js/store";

type Tag = {
  id: number;
  name: string;
};

const App: Component = () => {
  const [allTags] = createStore<Array<Tag>>([
    { id: 0, name: "foo" },
    { id: 1, name: "bar" },
    { id: 2, name: "baz" },
  ]);

  const [appliedTags, setAppliedTags] = createStore<Array<Tag>>([
    { id: 1, name: "bar" },
  ]);

  return (
    <>
      <ul>
        <For each={allTags}>
          {(t) =>
            appliedTags.some((v) => v.id === t.id) ? (
              <li style={"font-weight: bold;"}>{t.name}</li>
            ) : (
              <li>{t.name}</li>
            )
          }
        </For>
      </ul>
      <button
        onClick={() => {
          setAppliedTags((cur) => [...cur, { id: 0, name: "foo" }]);
        }}
      >
        Add "foo" tag
      </button>
    </>
  );
};