Tengo un componente que estoy usando 3 veces con diferentes datos que puedo completar con el siguiente código;

 <div> <Container className="mt-5"> <Row> {author_data.map((authors) => { return ( <Col key={authors.id} className="pe-5 ps-5"> <Author key={authors.id} image={authors.image} author={authors.author} description={authors.description} handleClick={(author) => setAuthor(author)} /> </Col> ); })} </Row> </Container> </div> );

Sin embargo, estoy buscando cambiar el CSS en cada componente una vez que hago clic en uno de los componentes de Autor. algo como lo siguiente usando JS nativo.

 document.getElementById("author1").classList.add("addGrayScale"); document.getElementById("author2").classList.add("addGrayScale"); document.getElementById("author3").classList.remove("addGrayScale");

He usado los ganchos useState y useContext pero parece que no puedo hacer que funcione porque el componente Author recibirá los mismos apoyos. ¿Debo crear componentes separados para cada autor? O hay otra manera de hacer esto.