i am making a blog with filter, the filtering just works fine but I want to specify which the filter is selected..

the code is

{cardCategories.map((cat) => {
  return (
    <Chip
      key={cat}
      style={{ margin: "5px 5px 25px 5px" }}
      label={cat}
      variant='outlined'
      clickable
      id={cat}
      onClick={handleCategoryChange}
    />
  );
})}

this show the following

when clicked one of these button the filtered posts are shown below this but we can't figure out which category is selected. This chip component is made with material-ui.

I want to apply styling on the clicked button so that is shows which of the categories is selected. If I apply styling with

document.getElementById("All").style.border = "1px solid red"

then it is applied but when clicked on the 2nd category it then shows styling on the both and so it does not remove the border from the previous but applies on all the clicked ones.