Re render on filter in a for

const SectionPlan = () => 
{
  const [ filter, setFilter ] = useSignal('home');

  const handleFilterHome = (): void =>
  {
    setFilter('home');
  };

  const handleFilterEnterprise = (): void =>
  {
    setFilter('enterprise');
  };

  return (
  <>
        <button onclick={handleFilterHome}>
          {sectionPlanLocale.buttonHome}
        </button>

        <button onclick={handleFilterEnterprise}>
          {sectionPlanLocale.buttonEnterprise}
        </button>

        <For each={sectionPlanLocale.plan.filter((element) => element.category === filter())}>
          {(plan) => <CardPlan
            image={plan.image}
            price={plan.price}
            title={plan.title}
            benefit={plan.benefit}
            velocity={plan.velocity}
            data-animate='animate-right-left'
          />
          }
        </For>
    </>
  )
}