Fetching data by renderer in ag-grid using reactjs - reactjs

Question

I am doing a project in ag-grid and using renderer to render selected gender from it. But, I am not able to fetch the data back. Actually, I have to get the value selected in the dropdown, I tried a lot but I am not able to get it. Please can someone help me with this? At least can I get a hint
App.js
class App extends Component {
constructor(props) {
super(props);
this.state = {
columnDefs: [
{ headerName: "Id", field: "Id", width: 120, checkboxSelection: true, sortable: true, filter: true, editable: true, resizable: true },
{ headerName: "Name", field: "Name", width: 140, sortable: true, filter: true, editable: true, resizable: true },
{ headerName: "Email", field: "Email", width: 200, sortable: true, filter: true, editable: true, resizable: true },
{ headerName: "Gender", field: "Gender", cellRenderer: 'genderRenderer', cellRendererParams: { onGenderChange: this.onGenderChange }, width: 140, sortable: true, filter: true, resizable: true },
{ headerName: "DOB", field: "DOB", cellRenderer: 'dateRenderer', cellRendererParams: { onDateChange: this.onDateChange }, width: 160, sortable: true, filter: true, editable: true, resizable: true },
{ headerName: "Country", field: "Country", cellRenderer: 'countryRenderer', cellRendererParams: { onCountryChange: this.onCountryChange }, width: 140, sortable: true, filter: true, resizable: true },
{ headerName: "City", field: "City", cellRenderer: 'cityRenderer', cellRendererParams: { onCityChange: this.onCityChange }, width: 140, sortable: true, filter: true, resizable: true },
{ headerName: " ", field: "Delete", cellRenderer: 'deleteRenderer' }
],
rowData: [
{ 'Id': '1', 'Name': "kishor", 'Email': "kishor#gmail.com", 'Gender': "", 'DOB': "", 'Country': "", 'City': "" },
],
suppressAggFuncInHeader: true,
frameworkComponents: {
genderRenderer: GenderRenderer,
}
this.onGenderChange = this.onGenderChange.bind(this)
}
onGenderChange = (setGender) => {
console.log("Gender Change", setGender)
}
GenderRenderer.js
import React, {useState} from 'react';
function GenderRenderer(props) {
const[gender, setGender] = useState(props.value);
const onGenderChange = (event) => {
props.onGenderChange(event.target.value);
setGender(event.target.value);
}
return(
<div>
<select name="select" value={gender} onChange={onGenderChange}>
<option value="male"> Male </option>
<option value="female"> Female </option>
</select>
</div>
)
}
export default GenderRenderer;