如何使用React Toggle Inside Map函数

import React, { useState } from 'react';

const ToggleComponent = ({ label, value, onChange }) => (
  <div>
    <label>{label}</label>
    <input
      type="checkbox"
      checked={value}
      onChange={(e) => onChange(e.target.checked)}
    />
  </div>
);

const ToggleList = ({ items }) => {
  const [toggles, setToggles] = useState(items.map(() => false));

  const handleToggleChange = (index, value) => {
    const newToggles = [...toggles];
    newToggles[index] = value;
    setToggles(newToggles);
  };

  return (
    <div>
      {items.map((item, index) => (
        <ToggleComponent
          key={index}
          label={item.label}
          value={toggles[index]}
          onChange={(value) => handleToggleChange(index, value)}
        />
      ))}
    </div>
  );
};

const App = () => {
  const items = [
    { label: 'Option 1' },
    { label: 'Option 2' },
    { label: 'Option 3' },
  ];

  return (
    <div>
      <h1>Toggle List</h1>
      <ToggleList items={items} />
    </div>
  );
};

export default App;