How to dynamically change the classname of already existing elements in Reactjs

I am building a simple memory game and I want to indicate that the player guessed the correct/incorrect answer by modifying the classnames of existing elements such that they flash green or red, I am currently just printing 'CORRECT' and 'WRONG' to the console.

Here is a function that renders the elements I want to flash green/red:

  const renderMajorSegment = (musicKey, index) => {
    let arc = calculateArc(outerRadius, innerRadius, musicKey.segmentMetadata.startAngle, musicKey.segmentMetadata.endAngle);
    let [arcCenterX, arcCenterY] = arc.centroid();

    return <g className={`circle-segment ${musicKey.segmentMetadata.majorCircle.isVisible ? 'isVisible': ''}`} 
              key={index}>
            <path 
              d={arc.apply()} // apply() is needed to generate the string that goes into the 'd' attribute
            />
            <text x={arcCenterX} y={arcCenterY} transform={`rotate(15, ${arcCenterX}, ${arcCenterY})`}>
              {abbreviateKeyFromChord(musicKey.chords[0])}
            </text>
          </g>
  }

And here is the main part of my functional components:

  return (
    <div className='circle-of-fifths-container'>
      <svg
        height={diameter*1.1}
        width={diameter*1.1}>
        <g className='circle-container' transform={`translate(${diameter/2 + 25},${diameter/2 + 25}) rotate(-15)`}>
          <circle r={outerRadius} className='base-circle'/>
          <g className='outer-circle-segments-container'>
            {musicKeysObject.map((musicKey, index) => renderMajorSegment(musicKey, index))}
          </g>
          <g className='inner-circle-segments-container'>
            {musicKeysObject.map((musicKey, index) => renderMinorSegment(musicKey, index))}
          </g>
          {mode === READY && 
            <g id='play-button-container' onMouseUp={startRound}>
              <circle r={innerRadius2} id='play-button'/>
              <text id='play-button-text' transform='rotate(15)'>PLAY GAME</text>
            </g>}
        </g>
      </svg>
      {mode === PLAYING &&
        <input placeholder='Your answer' onKeyDown={handleUserInput}></input>
      }
    </div>
  )

I haven't really tried anything yet, I'm just thinking about the problem and coming up with some solutions on how to approach it.

My first idea was to add a parameter to the renderMajorSegment() function which could accept a string based on the correct/wrong answer and then change the classname according to that.

After some googling, I found that I could store something in state and then modify the class of the elements based on the value of the state. In this case, I would modify the value of the state and I would just be able to reference the state value in the renderSegmentMajor() function and do something similar to what I've already done with the isVisible value.

This is my function that will handle the logic and cause the classname changes to occur (when the user submit an answer):

  const handleUserInput = (event) => {
    var index;
    if (hiddenSegment.major) {
      index = 0;
    } else {
      index = 5;
    }

    if (event.key === 'Enter') {
      if (event.target.value === abbreviateKeyFromChord(hiddenSegment.chords[index])) {
        console.log('CORRECT');
        // Set both major and minor circles to true
        // 1 will already be true so it makes no difference, sets the non-visible one to true
        hiddenSegment.segmentMetadata.majorCircle.isVisible = true;
        hiddenSegment.segmentMetadata.minorCircle.isVisible = true;

        // Modify the css classes to make the segments go green

        startRound();
      } else {
        // Modify the css classes to make the segments go red
        console.log('WRONG');
      }
    }
  };