How to rotate pseudo-element on click in ReactJS and its content is SVG

[images for my project]

[1]: https://i.stack.imgur.com/a6EFH.png

[2]: https://i.stack.imgur.com/lMhNu.png

when I click on the orange arrow I want to rotate it (180deg)

Is this can be done with CSS or I should use JS

And how I can declare a variable and give it a pseudo-element as a value in ReactJS

<div className="container">
        <div className="imgBox">
          <img src={img_1} alt="img_1" className="img_1" />
          <img src={img_2} alt="img_2" className="img_2" />
        </div>

        <div className="textBox">
          <h1>FAQ</h1>
          <div className="questions">
            <div>
              <button
                onClick={() => {
                  hideText(p1);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p1} className="p1 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button
                onClick={() => {
                  hideText(p2);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p2} className="p2 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button
                onClick={() => {
                  hideText(p3);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p3} className="p3 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button
                onClick={() => {
                  hideText(p4);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p4} className="p4 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button
                onClick={() => {
                  hideText(p5);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p5} className="p5 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />
          </div>
        </div>
      </div>

Styling

.container>.textBox>.questions>div>button {
  width: 100%;
  height: 30px;
  background: transparent;
  color: var(--Very-dark-grayish-blue);
  font-size: 15px;
  text-align: left;
  border: 0;
  cursor: pointer;
  outline: none;
}

.container>.textBox>.questions>div>button:hover {
  color: var(--Soft-red);
}

.container>.textBox>.questions>div>button:focus {
  font-weight: bold;
}

.container>.textBox>.questions>div>button::after {
  content: url(./images/icon-arrow.svg);
  float: right;
}

.container>.textBox>.questions>div>button::after:focus {
  transform: rotate(180deg);
}