如何创建一个列表视图，使窗口具有弹出信息？

import React from 'react';
import { List, Button, Modal } from 'antd';

class MyComponent extends React.Component {
  state = {
    data: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' },
    ],
    showModal: false,
    selectedItem: null,
  };

  handleItemClick = (item) => {
    this.setState({ showModal: true, selectedItem: item });
  };

  handleModalClose = () => {
    this.setState({ showModal: false, selectedItem: null });
  };

  render() {
    const { data, showModal, selectedItem } = this.state;

    return (
      <div>
        <List
          dataSource={data}
          renderItem={(item) => (
            <List.Item>
              {item.name}
              <Button onClick={() => this.handleItemClick(item)}>Show Info</Button>
            </List.Item>
          )}
        />

        <Modal
          visible={showModal}
          onCancel={this.handleModalClose}
          footer={null}
        >
          {selectedItem && (
            <div>
              <h2>{selectedItem.name}</h2>
              <p>Additional information goes here...</p>
            </div>
          )}
        </Modal>
      </div>
    );
  }
}

export default MyComponent;