如何从具有相同onchange功能的多个TextArea material ui中获取标签和值？

import React, { useState } from 'react';

const MyComponent = () => {
  const [textAreaValues, setTextAreaValues] = useState({});

  const handleTextAreaChange = (event) => {
    const { id, value } = event.target;
    setTextAreaValues((prevValues) => ({
      ...prevValues,
      [id]: value,
    }));
  };

  return (
    <div>
      <textarea id="textarea1" onChange={handleTextAreaChange} />
      <textarea id="textarea2" onChange={handleTextAreaChange} />
      {/* 添加更多的TextArea组件 */}
    </div>
  );
};

const handleButtonClick = () => {
  Object.entries(textAreaValues).forEach(([id, value]) => {
    console.log(`TextArea标签: ${id}`);
    console.log(`TextArea值: ${value}`);
  });
};