reactJs useRef to add or Remove className - reactjs

Question

How to Add className or Remove ClassName using useRef
code follows
const refs = useRef("");
const clicka =()=>{ ref.current.classList.add('correct') }
<div onClick={()=>{clicka()}} refs={ref} className="js-choose-answer"><div>a</div>{user.opt1}</div></div>
i can Access className Value ref.current.className but unable to add
code
import React, { useState, useEffect,useRef} from 'react';
const Slugg = ({user}) => {
//onClick to set className "js-choose-answer correct"
return (
<div>
<div className="__options">
<div onClick={()=>{clicka(user._id)}} ref={ref} className="js-choose-answer"><div>a</div><{user.opt1} </div></div>
</div>
<div className="__options">
<div onClick={()=>{clicka(user._id)}} ref={ref} className="js-choose-answer"><div>a</div><{user.opt1} </div></div>
</div>
</div>
)
}

Answer 1

Try this using useState. Set a boolean corresponding to user id which rerenders the elements with classname correct
const [status, setStatus] = useState({});
const clicka =(userId)=>{
setStatus(prevStatus=>{
return {...prevStatus, [userId]: true}
})
}
<div onClick={()=>{clicka(user._id)}} className={`js-choose-answer ${status[user._id] ? 'correct': ''}`}><
<div>a</div><{user.opt1} </div></div>
</div>

Answer 2

I usually do this and it works
const currentElement = useRef(null)
const switchClassHandler = () => {
currentElement.current.classList.add('correct')
currentElement.current.classList.remove('error')
}
return (
<React.Fragment>
<div ref={currentElement} onClick={switchClassHandler} className={'global error'}>
hello
</div>
</React.Fragment>
)