Svelte 5 reactive store methods

The below code is working as it should, I’m just trying to gain a better understanding of why.

How is the getCurrentElement method of TestState reactive without the use of $derived()? Are store methods that make use of state reactive by default?

Im using [email protected]

test-store.svelte.ts

import { getContext, setContext } from 'svelte';

class TestState {
  elements = [
    {
      id: 'hghxt',
      name: 'Give',
    },
    {
      id: 'vhtl9',
      name: 'Connection',
    },
    {
      id: '5n0t0',
      name: 'Take notice',
    },
    {
      id: 'xlfba',
      name: 'Keep learning',
    },
    {
      id: '1f3z2',
      name: 'Be active',
    },
  ];

  #currentElementId = $state<string>();
  
  getCurrentElement() {
    return this.elements.find(element => element.id === this.#currentElementId);
  }

  setCurrentElement(id: string) {
    if (!this.elements.some(element => element.id === id)) return;

    this.#currentElementId = id;
  }
}

const TEST_STORE_KEY = Symbol('TEST_STORE');

export function setTestState() {
  return setContext(TEST_STORE_KEY, new TestState());
}

export function getTestState() {
  return getContext<ReturnType<typeof setTestState>>(TEST_STORE_KEY);
}

TestComponent.svelte

<script lang="ts">
  import { getTestState } from '$lib/stores/test-store.svelte';

  // initialised at +page.svelte
  const testState = getTestState();
</script>

{#each testState.elements as { name, id }}
  <button 
    class:bg-yellow={testState.getCurrentElement()?.id === id} 
    onclick={() => testState.setCurrentElement(id)}>
    {name}
  </button>
{/each}