如何更改每个映射值的属性，以便为每个事件更动态地使用我的组件？

import React, { useState } from 'react';

const MyComponent = ({ eventProps }) => {
  // 在组件内部使用useState来管理属性
  const [props, setProps] = useState(eventProps);

  // 在组件中使用属性进行渲染和处理
  return (
    <div>
      <h1>{props.title}</h1>
      <button onClick={props.onClick}>{props.buttonText}</button>
    </div>
  );
};

const App = () => {
  // 创建一个映射，其中包含每个事件的属性
  const eventPropsMap = new Map();
  eventPropsMap.set('event1', { title: '事件1', buttonText: '按钮1', onClick: () => console.log('点击事件1') });
  eventPropsMap.set('event2', { title: '事件2', buttonText: '按钮2', onClick: () => console.log('点击事件2') });

  return (
    <div>
      {/* 遍历eventPropsMap，并将每个属性对象传递给组件 */}
      {[...eventPropsMap].map(([eventId, eventProps]) => (
        <MyComponent key={eventId} eventProps={eventProps} />
      ))}
    </div>
  );
};

export default App;