Can't edit in td input of table in 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

;