I have a third-party radio button that loses tab focus when we interact with it via the keyboard; i.e. tabbing to it and then pressing enter causes the focus to move on to another element, when I want the focus to stay on the radio button. Is there a way to programmatically focus the radio button from inside its onChange handler? My code looks something like this, which doesn't work:

const Component = (event) =>{
   const handleChange = ()=>{
      //business logic
      event.target.focus()
   }
   return(<RadioBtn onChange={handleChange}/>)
}

I also tried using a ref but that didn't work either, did I do something wrong?

const Component = (event) =>{
   const rdbRef = useRef();

   const handleChange = ()=>{
      //business logic
      rdbRef.current.focus();
   }
   return(<RadioBtn 
           onChange={handleChange}
           ref={rdbRef}/>)
}