Can't edit in td input of table in Reactjs - reactjs

Question

I have two component here Addform (Childcomponent)and App component(parent) I have perform row add and delete operation Why my edit doesn't works ?I have pass the specific row value on which edit has to perform in td input element but I can't perform a onChange event on td input and how to update the data on specific row? How edit can be implement Here?
code
import React, { useState } from "react";
import Select from "react-select";
const AddForm = (props) => {
const newdata = props.editdata;
const [id, setId] = React.useState("");
const [name, setName] = React.useState("");
const [gender, setGender] = React.useState("");
console.log(gender);
return (
<tr>
<td>
<input
type="text"
value={id}
onChange={(e) => {
setId(e.target.value);
}}
></input>
</td>
<td>
<input
type="text"
value={name}
onChange={(e) => {
setName(e.target.value);
}}
></input>
</td>
<td>
<Select options={props.List} value={gender} onChange={setGender} />
</td>
<td>
<button
onClick={(e) => {
props.addRow({
id: id,
name: name,
genderId: gender.value,
gender: gender.label
});
setId("");
setName("");
setGender("");
}}
>
Add
</button>
</td>
</tr>
);
};
const List = [
{
value: 1,
label: "Male"
},
{ value: 2, label: "Female" }
];
const App = (props) => {
const [data, setData] = React.useState([]);
const [edit, isEdit] = useState(false);
const [editdata, setEditData] = useState([]);
const [id, setId] = React.useState(editdata.id || "");
const [name, setName] = React.useState(editdata.name || "");
const [gender, setGender] = React.useState(editdata.gender || "");
const editRow = (e) => {
setData({ ...data, e });
};
return (
<div>
<table>
<tr>
<th>Id</th>
<th>Name</th>
<th>Gender</th>
<th>Action</th>
</tr>
{data &&
data.map((row, idx) => {
if (edit === idx) {
return (
<tr key={idx}>
<td>
<input
type="text"
value={editdata.id}
onChange={(e) => {
setId(e.target.value);
}}
></input>
</td>
<td>
<input
type="text"
value={editdata.name}
onChange={(e) => {
setName(e.target.value);
}}
></input>
</td>
<td>
<Select
options={List}
value={editdata.gender}
onChange={setGender}
/>
</td>
<td>
{" "}
<button
onClick={(e) => {
editRow({
id: id,
name: name,
genderId: gender.value,
gender: gender.label
});
}}
>
save
</button>
</td>
</tr>
);
} else {
return (
<tr key={idx}>
<td>{row.id}</td>
<td>{row.name}</td>
<td>{row.gender}</td>
<td>
<button
onClick={(e) => {
let _data = data.filter((item) => {
return item.id !== row.id;
});
setData(_data);
}}
>
Delete
</button>
</td>
<td>
<button
onClick={(e) => {
isEdit(idx);
setEditData(row);
// console.log(editdata);
<AddForm />;
}}
>
Edit
</button>
</td>
</tr>
);
}
})}
<AddForm
data={data}
List={List}
setData={setData}
editdata={editdata}
addRow={(e) => {
setData([...data, e]);
}}
/>
</table>
</div>
);
};
export default App
;