Why does this loop infinitely

export default function Test() {
  const [people, setPeople] = createStore([
    { id: '19' },
    { id: '11' },
  ]);

  const serverFunc = async (id: string): Promise<string> => {
    'use server';
    console.log('running serverFunc');
    return 'Not Found';
  };

  return (
    <For each={people}>
      {(person, index) => {
        return (
          <div>
            {index() + 1}: {person.id}
            <span>{createAsync(() => serverFunc(person.id))()}</span>
          </div>
        );
      }}
    </For>
  );
}

      <For each={people}>
        {(person, index) => {
          const response = createAsync(() => serverFunc(person.id));
          return (
            <div>
              {index() + 1}: {person.id}
              <span>{response()}</span>
            </div>
          );
        }}
      </For>