CRUD operation on dynamic form reactjs?

Question

AS a Learner in ReactJS ,I have tried to perform Crud operation on the dynamic form But failed to perform a Update operation i.e edit button .i want to pass specific row data to the ADDform component from the Appcomponent Table and edit the data in addForm Component and save the data.I am unable to show data in respected addform component inputs when click on edit button?

How to perform Edit operation ?

  import React, { useState } from "react";
        import Select from "react-select";
        const AddForm = (props) => {
          
          const newdata = props.editdata;
          
          const [id, setId] = React.useState(newdata["id"]?newdata.id:"");
          const [name, setName] = React.useState(newdata["name"]?newdata.name:"");
          const [gender, setGender] = React.useState(()=>{
            let _gender= newdata["gender"]?.toLowerCase() || ""
               let id_ =  props.List.filter( x => {return x["label"]?.toLowerCase() ===_gender  } ) ||""
               console.log(id_)
           return id_[0]["label"]
          });
        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([]);
        
          return (
            <div>
              <table>
                <tr>
                  <th>Id</th>
                  <th>Name</th>
        
                  <th>Gender</th>
        
                  <th>Action</th>
                </tr>
        
                {data &&
                  data.map((row, idx) => {
                    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(true);
                              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;