Динамическое изменение источника изображения для карусели

Я начинаю изучать React и строю простую карусель с картинками. У меня есть 3 изображения, которые я извлекаю из Github в виде массива const. Требование состоит в том, чтобы иметь кнопки «вперед» и «назад» для циклического переключения изображений.
При запуске приложения первое изображение отображается правильно. Кнопка корректно увеличивает счетчик (У меня есть журналы консоли, подтверждающие это).
Но <img> не обновляет/не перезагружает загрузку следующего изображения из массива на основе измененной переменной счетчика.

На данный момент у меня реализована только функциональность кнопки вперед.

const photoList = [
  "https://avatars0.githubusercontent.com/u/810438?v=4",
  "https://avatars2.githubusercontent.com/u/6820?v=4",
  "https://avatars2.githubusercontent.com/u/63648?v=4"
];

//Component for the Forward button

function ForwardButton(props) {
  console.info("Forward Button clicked");
  const handleClick = () => props.OnClick(props.increment);
  return <button onClick = {handleClick}> --> </button>;
}

//Component for the Back button

function BackButton() {
  return <button className = "BackButton"> {"<--"} </button>;
}

//Main component with other components nested

function App() {
  const state = {
    profiles: photoList
  };

  let count = 0;

  const [counter, setCounter] = useState(0);
  const IncrementCounter = incrementValue => {
    setCounter((count = counter + incrementValue));
    console.info(count);
  };
  return (
    <div className = "App">
      <header> Picture Carousal</header>
      <img className = "Image" src = {state.profiles[count]} />
      <BackButton />
      <ForwardButton OnClick = {IncrementCounter} increment = {1} />
    </div>
  );
}

ReactDOM.render(<App />, mountNode);

Я хотел бы использовать эту очень простую реализацию и попытаться выяснить, как заставить <img> обновляться с новым изображением. Надеюсь, это легко исправить.