如何使用react js以周期性的方式一次呈现列表中的一个元素？

import React, { Component } from 'react';

class ListRenderer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentIndex: 0,
    };
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      const { data } = this.props;
      const { currentIndex } = this.state;
      const nextIndex = (currentIndex + 1) % data.length;
      this.setState({ currentIndex: nextIndex });
    }, 1000); // 设置每隔1秒切换一次元素
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    const { data } = this.props;
    const { currentIndex } = this.state;
    const currentElement = data[currentIndex];

    return (
      <div>
        <h1>当前元素：</h1>
        <p>{currentElement}</p>
      </div>
    );
  }
}

export default ListRenderer;

<ListRenderer data={['元素1', '元素2', '元素3']} />