Array of components gets re-render every time that a new component is added

export default function RecipeForm() {
  const referenceForm = () => (
    <div class="mb-2">
      <FormInput
        type="text"
        name="references[]"
        label="Reference"
        autocomplete="off"
        required={false}
      />
    </div>
  );

  // References
  const [references, setReferences] = createSignal<Component[]>([]);
  // Add initial element
  setReferences(new Array(1).fill(referenceForm));

  const increaseNumberOfReferences: JSX.EventHandler<
    HTMLButtonElement,
    MouseEvent
> = (e): void => {
    e.preventDefault();
    setReferences([...references(), referenceForm]);
  };


  return (
    <>
    <Index each={references()}>
      {(reference, index) => <>{reference}</>}
    </Index>
    <button
      class="btn btn-accent"
      onClick={increaseNumberOfReferences}
    > 
      Add new recipe
    </button>
    </>
  )
}

export default function RecipeForm() {
  const referenceForm = () => (
    <div class="mb-2">
      <FormInput
        type="text"
        name="references[]"
        label="Reference"
        autocomplete="off"
        required={false}
      />
    </div>
  );

  // References
  const [references, setReferences] = createSignal<Component[]>([]);
  // Add initial element
  setReferences(new Array(1).fill(referenceForm));

  const increaseNumberOfReferences: JSX.EventHandler<
    HTMLButtonElement,
    MouseEvent
> = (e): void => {
    e.preventDefault();
    setReferences([...references(), referenceForm]);
  };


  return (
    <>
    <Index each={references()}>
      {(reference, index) => <>{reference}</>}
    </Index>
    <button
      class="btn btn-accent"
      onClick={increaseNumberOfReferences}
    > 
      Add new recipe
    </button>
    </>
  )
}