How to get value of radio and checkbox input field in React JS

import "./App.css";
import React, { useState } from 'react';
export default function App(){  
  const [gender, setGender]=useState("");
  const [hobby, setHobby]=useState([]);

  const radioHandler=(event)=>{
    setGender(event.target.value);
  }

  const hobbyHandler=(e)=>{
    if(e.target.checked){
      setHobby([...hobby, e.target.value]);
    }
    else{
      setHobby(hobby.filter(h=>h!==e.target.value));
    }
  }

  return(
    <>        
    <p>
      <label htmlFor="gender">Gender:{gender}</label>
      <input checked={gender === "Male"} name="gender" type="radio" value="Male" onChange={radioHandler}/>Male
      <input checked={gender === "Female"} name="gender" type="radio" value="Female" onChange={radioHandler}/>Female
    </p>

    <p>
      <label htmlFor="hobby">Hobby:{hobby.join(",")}</label>
      <input checked={hobby.includes("Reading")} type="checkbox" name="hobby" value="Reading" onChange={hobbyHandler}/>Reading
      <input checked={hobby.includes("Singing")} type="checkbox" name="hobby" value="Singing" onChange={hobbyHandler}/>Singing
    </p>
    </>
  )  
}