如何在material-ui中获取复选框标签的值？

npm install @mui/material @emotion/react @emotion/styled

import React, { useState } from 'react';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';

function App() {
  const [checkedValues, setCheckedValues] = useState({});

  const handleCheckboxChange = (event) => {
    const { name, checked } = event.target;
    setCheckedValues((prev) => ({
      ...prev,
      [name]: checked,
    }));
  };

  return (
    <div>
      <FormControlLabel
        control={<Checkbox name="option1" checked={checkedValues.option1 || false} onChange={handleCheckboxChange} />}
        label="Option 1"
      />
      <FormControlLabel
        control={<Checkbox name="option2" checked={checkedValues.option2 || false} onChange={handleCheckboxChange} />}
        label="Option 2"
      />
      <FormControlLabel
        control={<Checkbox name="option3" checked={checkedValues.option3 || false} onChange={handleCheckboxChange} />}
        label="Option 3"
      />
      <pre>{JSON.stringify(checkedValues, null, 2)}</pre>
    </div>
  );
}

export default App;