Estoy haciendo un blog con filtro, el filtrado funciona bien pero quiero especificar cuál filtro está seleccionado.

el codigo es

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

esto muestra lo siguiente

cuando se hace clic en uno de estos botones, las publicaciones filtradas se muestran debajo, pero no podemos determinar qué categoría está seleccionada. Este componente de chip está hecho con material-ui.

Quiero aplicar estilo en el botón en el que se hizo clic para que muestre cuál de las categorías está seleccionada. Si aplico peinado con

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

luego se aplica, pero cuando se hace clic en la segunda categoría, muestra el estilo en ambos, por lo que no elimina el borde del anterior, sino que se aplica a todos los que se hizo clic.