Signal Arrays do not work with HTML-Elements?

import { useSignal } from "@preact/signals";

export default function Island() {
  const activated = useSignal(false);
  return (
    <button
      onClick={() => {
        activated.value = !activated.value;
      }}
      class={activated.value ? "bg-blue-800" : "bg-red-800"}
    >
      Test
    </button>
  );
}

import { useSignal } from "@preact/signals";

export default function Island() {
  const activated = useSignal([false]);
  return (
    <button
      onClick={() => {
        activated.value[0] = !activated.value[0];
      }}
      class={activated.value[0] ? "bg-blue-800" : "bg-red-800"}
    >
      Test
    </button>
  );
}