I have a component that i'm using 3 times with different data which I am able to complete with the following code;

    <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>
  );

However Im looking to change the CSS on each component once I click on one of the Author components. something like the below using native JS.

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

I have used the useState and useContext hooks but I can't seem to get it to work because the Author component will receive the same props. Should I create separate components for each Author? or is there another way to do this.