我试图在react中使用对象数组一次呈现一个组件到DOM

import React, { useState } from 'react';

const componentsData = [
  { id: 1, component: <Component1 /> },
  { id: 2, component: <Component2 /> },
  { id: 3, component: <Component3 /> },
  // ...更多组件
];

function App() {
  const [currentComponentIndex, setCurrentComponentIndex] = useState(0);

  const NextComponent = () => {
    setCurrentComponentIndex((prevIndex) => (prevIndex + 1) % componentsData.length);
  };

  const PrevComponent = () => {
    setCurrentComponentIndex((prevIndex) => (prevIndex - 1 + componentsData.length) % componentsData.length);
  };

  return (
    <div>
      {componentsData[currentComponentIndex].component}
      <button onClick={PrevComponent}>Previous</button>
      <button onClick={NextComponent}>Next</button>
    </div>
  );
}

export default App;