Как меняется порядок элементов списка в React после клика по кнопке

Нужно понять, как будет изменён порядок отрисованных элементов в DOM после того, как пользователь нажмёт кнопку, учитывая работу хука useState и применение метода reverse к массиву.

import React, { useState } from 'react';

function SimpleList(props) {
  const [list, setList] = useState(props.list || ['a', 'b']);
  const rotateList = () => {
    setList([...list.reverse()]);
  };

  return (
    <div>
      {list.map((txt, id) => {
        return <div key={id}>{txt}</div>;
      })}
      <button onClick={rotateList}>rotate</button>
    </div>
  );
}