How to return a string from an array using React.js useState hook

I’m using the useState hook in React and am trying to return a string to display in an h1 element from an array every time I click a button to call a function.

I tried using a for loop to return the index of each array, however, my h1 element only displays the last index of the array. Here is my code:

import React, { useState } from "react";

export default function App() {
  const [state, setState] = useState("Start");

  const greeting = ["Hello", "World!"];

  function nextWord() {
    for (let i = 0; i < greeting.length; i++) {
      setState(greeting[i]);
    }
  }

  return (
    <>
      <h1>{state}</h1>
      <button onClick={nextWord}>+</button>
    </>
  );
}

As you can see, my nextWord function only displays the last item of my array on the h1 element. How do I get it to display index 0, index 1, etc… with each click of the button calling the nextWord function. (E.g., It will display “Hello” in the h1 the first click, and then “World” on the next click.)