How I can get check box value and button value in this stuation? Can any one have suggest - node.js

Question

I want to get the value of "gender" checkbox and "button" in div rect1,and react 2 to male,female and customer,shop. How I can get it?
I was try to gender == "male" or "female" but it return false
What I need change ?
function Register() {
const [username,setUsername]= useState("");
const [password,setPassword]= useState("");
const [email,setEmail]= useState("");
const [phone,setPhone]= useState("");
const [gender,setGender]= useState("");
const [role,setRole]= useState("");
const [error, setError]= useState("");
let history = useHistory();
const register = (e) => {
e.preventDefault();
axiox.post("http://localhost:5001/api/auth/register",
{username,
email,
phone,
password,
gender,
role,
}).then((response)=> {
console.log("response", response)
localStorage.setItem("login", JSON.stringify({
userLogin: true,
token: response.data.access_token,
}));
setError("");
setUsername("");
setPassword("");
setGender(");
setRole"();
history.push("/login");
}).catch(error =>setError(error.response.data.message));
};
return (
<input type="radio" name="gender" value={male} onChange={(e)=> setGender(e.target.value)}/>
<label for="male"></label>
<span>Male</span>
<input type="radio" name="gender" value={female} onChange={(e)=> setGender(e.target.value)}/>
<label for="female"></label>
<span>Female</span>
</div>
<div class="rect1">
<button class="button" type="button" value={shop} onChange={(e)=> setRole(e.target.value)}><img src={process.env.PUBLIC_URL + `/Images/shop 1.png`} /></button>
</div>
<div class="rect2">
<button class="button" type="button" value={customer} onChange={(e)=> setRole(e.target.value)}> <img src={process.env.PUBLIC_URL + `/Images/take-away.png`} /></button>
Thank for helping me

Answer 1

change state to boolean call it isMale
const [isMale , setIsMale]=useState(false)
than into return make
<input type="radio" name="gender" value={male} onChange={()=>
setGender(true)}/>
<label for="male"></label>
<span>Male</span>
<input type="radio" name="gender" value={female} onChange={()=> setGender(false)}/>
<label for="female"></label>
<span>Female</span>