radio toggle button in react

// data.js

import girl from '../assets/girl.webp';
import boy from '../assets/boy.webp';

export const gender = [
    {
        data: "Boy",
        icon: boy,
    },
    {
        data: "Girl",
        icon: girl,
    }
]

// App.jsx

import { gender } from './constants/data';
import { useState } from 'react';

const App = () => {

  const [switchToggle, setSwitchToggle] = useState(true);

  const handleClick = (data) => {
    setSwitchToggle(pre => !pre);
    console.log(data);
  }

  return (
    <div className="radioBtnContainer">
      {
        gender.map(({ data, icon }) => (
          <label htmlFor={data} >
            <input
              id={data}
              type="radio"
              value={data}
              name="value"
              onChange={() => handleClick(data)}
            />
            <img src={icon} alt={data} /> {data}
          </label>
        ))
      }
      <span 
        className={`switch ${switchToggle ? 'activeSwitch' : ''}`}
      >
      </span>
    </div>
  )
}

export default App;

/* style.css */

* {
    margin : 0;
    padding: 0;
}

body {
    width          : 100%;
    height         : 100vh;
    display        : flex;
    align-items    : center;
    justify-content: center;
}

.radioBtnContainer{
    background-color: white;
    width           : 500px;
    display         : flex;
    align-items     : center;
    border-radius   : 25px;
    border          : 1px solid skyblue;
    position        : relative;
}

label {
    cursor       : pointer;
    display      : flex;
    align-items  : center;
    width        : 50%;
    height       : 30px;
    border-radius: 25px;
    position     : relative;
    z-index      : 1;
}

.switch {
    position        : absolute;
    top             : 0;
    left            : 0;
    bottom          : 0;
    background-color: rgb(194, 222, 255, .5);
    border          : 1px solid skyblue;
    width           : 50%;
    border-radius   : 25px;
    transition      : left .3s;
}

.activeSwitch {
    left: 50%;
}

input {
    margin    : 0 8px;
    appearance: none;
    outline   : none;
}

img {
    margin-right: 10px;
    width       : 16px;
}