React make class active on element click

I need to make class active on when box is clicked using React hooks.

The box is not a simple div element, but is dynamically loaded from an array.

I have problem with this funtion:

const changeClassName = (props) => {
  return props.className.replace("box active");
};

This doesn't change the className property.

Codepen link

Full code:

import React, { useState } from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1"
const sounds = [
    {
      key: "A",
      mp3: "https://audiodeploy.netlify.app/8%20El-Mu'minun,%20115-116.mp3",
    },
    {
        key: "B",
        mp3: "https://audiodeploy.netlify.app/8%20El-Mu'minun,%20115-116.mp3",
      }
  ];
  
  const App = () => {
    const [keys, setKeys] = useState([
      "1","2"
    ]);
    const [active, setActive]=useState(false);
    return (
      <>
        <span id="text"></span>
        <div id="display" className="display">
          {sounds.map((sound, id) => {
            return <Box text={sound.key} audio={sound.mp3} />;
          })}
        </div>
      </>
    );
  };
  const changeClassName=(props)=>{
    return(
       props.className.replace("box active") // this doesn't change the className
    )
  }
  const playSound = (audioRef,props) => {
    audioRef.current.play();
    console.log(props.text);
    if(props.text==='A'||props.text=='B')
    ReactDOM.render(
      <>
   <p> Then did you think that We created you uselessly and that to Us you would not be returned?"</p>
   <p>So exalted is Allāh, the Sovereign, the Truth; there is no deity except Him, Lord of the Noble Throne.</p>
   <p>[Quran, 23:115-116]</p>
      </>
      , document.getElementById('text'));
      changeClassName(props);
  };
  
  const Box = (props) => {
    const audioRef = React.useRef();
  
    return (
      <div className="box" onClick={() => playSound(audioRef,props)}>
        {props.text}
        <audio
          src={props.audio}
          ref={audioRef}
        />
      </div>
    );
  };
ReactDOM.render(<App />, document.getElementById("root"));

Could you please help me to fix this?

from React make class active on element click