我有一个显示在Collapse中的数据列表，我只希望用户每次单击列表时都突出显示该列表，但***突出显示时一次一个***
为了更好地理解，请参阅此示例
https://codesandbox.io/s/list-highlight-demo-forked-ww0op

const [highlight, setHighlight] = useState(false)
const handleClick = () => {
   if (on) set(null)
   else set(index)
}
  <Collapse in={viewLocationList} sx={{ my: '2px' }}>
    {!!searchParameter && (
      <Box className="rounded-scrollbar widget-result-container"
      onClick={handleClick}
      sx={{
        my: 1,
        bgcolor: on && "lightgrey",
        "&:hover": { bgcolor: on && "lightgrey" }
      }}
      >
        {filteredLocations.map((location, key, on) => (
          <LocationWidgetItem
            key={key}
            location={location}
            onClickLocation={setActiveLocation}
            index={key} on={highlight === key} set={setHighlight}
          />
        ))}
      </Box>
    )}
  </Collapse>

这是当前代码的错误