Radio button style changes when clicked with React Hooks-CodePudding

I want the radio button to change when clicked. This is what i have now image

I want it to change to this when clicked

Here's my code: `

 const [active, setIsActive] = useState(false)

<div className={`checkbox payment-radio-btn1 ${active ? "checkbox:hover" : "" }`}>
  <input type="radio" value="paystack" name='payment' onChange={handleChange}/>
  <label id='paystack'>Paystack (Debit/Credit Card)</label>
</div>
<div className={`checkbox payment-radio-btn2 ${active ? "checkbox:hover" : "" }`}>
  <input type="radio" value="wallet" name='payment' onChange={handleChange}/>
  <label id='wallet'>Pay with Wallet</label>
</div>

Here's my css code

.checkbox:hover{
border: 2px solid #00B6F0;
background: #FFFFFF;
}

.payment-radio-btn1{
position: absolute;
width: 406px;
height: 64px;
left: 10px;
top: 128px;
background: #F3F4F5;
box-shadow: 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
border-radius: 4px;
margin-top: 20px;
margin-left: 6px;
display: flex;
}

CodePudding user response：

One option is a custom Radio element that allows you to represent your radio buttons however you like. In this example we use two emoji, but you could use images, or SVG if you wanted.

function Radio({ checked, onClick, children, on = "✔️", off = "