Javascript 复选框的单选按钮功能MUI

我正在try 创建一个带有手风琴包装的单选按钮功能的复选框.问题是，我一次只需要 Select 一项.如果已标记，则在 Select 另一项时应为未标记.

1. 我创建了筛选器组件

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


function FilterComponent (props) {
    const [selectedOption, setSelectedOption] = useState("");

    const handleChange = (event) => {

        setSelectedOption(event.target.value);
        console.log(selectedOption)

    };

    return (
        <FormGroup>
            <FormControlLabel
                control={
                    <Checkbox
                        checked={props.checked}
                        onChange={handleChange}
                        value={props.value}
                    />
                }
                label={props.label}
            />
        </FormGroup>
    );
};



export default FilterComponent;

2. 将其包裹在手风琴中，并添加滤镜组件和贴图

import React, { useState } from "react";
import Accordion from '@mui/material/Accordion';
import AccordionDetails from '@mui/material/AccordionDetails';
import AccordionSummary from '@mui/material/AccordionSummary';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import filterItem from "../sortingFilterItems";
import FilterComponent from "./filterComponent";


function CreateSortingFilter(filterItem) {
    return (
        <FilterComponent
            key={filterItem.id}
            value={filterItem.value}
            label={filterItem.label}
        />
    );
}


export default function ControlledAccordions() {
    const [expanded, setExpanded] = useState(false);
const[label, setLabel] = useState("Collapsed filters");

    const handleChange = (panel) => (event, isExpanded) => {
        setExpanded(isExpanded ? panel : false);
        setLabel (isExpanded ? "Expanded filters" : "Collapsed filters");
    };


    return (
        <div>
            <Accordion expanded={expanded === 'panel'} onChange={handleChange('panel')}>
                <AccordionSummary
                    expandIcon={<ExpandMoreIcon/>}
                    aria-controls="panel-content"
                    id="1"
                >

                    <Typography onChange={handleChange('panel')} sx={{color: 'text.secondary'}}>{label}</Typography>
                </AccordionSummary>
                <AccordionDetails>
                    {filterItem.map(CreateSortingFilter)}
                </AccordionDetails>
            </Accordion>
        </div>
    );
}

3. 项目ID值和标签存储在单独的文件中

const filterItem = [
  { id: 1, value: 1, label: "Recommended" },
  { id: 2, value: 2, label: "Recently Added" },
  { id: 3, value: 3, label: "Expiring Soon" },
  { id: 4, value: 4, label: "Most Rated" },
  { id: 5, value: 5, label: "Price: Low → High" },
  { id: 6, value: 6, label: "Price: High → Low" },
];

export default filterItem;

如果另一项被选中，如何拒绝上一次的选中？