Javascript 显示 React 中选定过滤器数组的总数

我有以下问题.在widgetFilters数组(长度==3)中，我想在过滤器的标题中显示所选项目的数量.

  const [selectedFilters, setSelectedFilters] = useState([]); 

在下面的代码snipet中，我映射了所有widgetFilter数组，并使3与标题、过滤器的名称typeName以及过滤器包含的选项一致，例如.

      <Stack>
        {widgetFilters.map((filter) => (
          <FilterWidgetAccordion
            key={filter.id}
            headline={filter.typeName}
            list={filter.options}
            selectedFilters={selectedFilters}
            setSelectedFilters={setSelectedFilters}
          />
        ))}
      </Stack>

FilterWidgetAccordion.js

    <Fragment>
      <Accordion>
        <AccordionSummary aria-controls="panel1a-content" id="panel1a-header">
          <StyledTypography>{headline}</StyledTypography>
        </AccordionSummary>
        <AccordionDetails>
          {list?.map((filterItem) => {
            return(
        
            <Button
              onClick={() => {
                const list = [...selectedFilters];
                const index = list.indexOf(filterItem);
                index === -1 ? list.push(filterItem) : list.splice(index, 1);
                setSelectedFilters(list);
              }}
              key={filterItem.value}
            >
              {filterItem.value} 
            </Button>
          )})}
        </AccordionDetails>
      </Accordion>
    </Fragment>

我想在"Product Category"标题旁边添加所选按钮的数量，如下图所示.