Why axios get request dont work on React modal?

Question

I created a dataTable form where i add firstName and LastName form, and it work well, so i want to create editing form with modal but axios request dont work for show the value on textField... look the code:

all code work well, the modal "dialog MUI" work, my only problem is that I can't get the value on the textArea of ​​the name to be changed in this case "firstName" should appear "Giuseppe Parisi".

const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [apiData, setApiData] = useState([]);
  const [id, setId] = useState(null);



  const sendDataToAPI = () => {
    axios.post("https://624fed5ef0ae10a8ea513bac.mockapi.io/Crud", {
      firstName,
      lastName,
    });
  };

  const updateDataToAPI = () => {
    axios.put("https://624fed5ef0ae10a8ea513bac.mockapi.io/Crud", {
      firstName,
      lastName,
    });
  };


 useEffect(() => {
    axios
      .get("https://624fed5ef0ae10a8ea513bac.mockapi.io/Crud")
      .then((getData) => {
        setApiData(getData.data);
      });
  });


  useEffect(() => {
    setFirstName(localStorage.getItem("firstName"));
    setID(localStorage.getItem("ID"));
  }, []);

  const setID = (id) => {
    console.log(id);
    localStorage.setItem("ID", id);
  };

and here the html:

return (
    <>
      <Navigation />
      <div className={classes.title}>
        <div className={classes.appBarSpacer}></div>
        <h1>Archivio Equitalia</h1>

        <div className={classes.center}>
          <div className={classes.centered}>
            <TextField
              name="fname"
              onChange={(e) => setFirstName(e.target.value)}
              className={classes.textForm}
              id="standard-name"
              label="First Name"
            />
            <TextField
              name="lname"
              onChange={(e) => setLastName(e.target.value)}
              className={classes.textForm}
              id="standard-name"
              label="Last Name"
            />
            <Button
              variant="contained"
              onClick={sendDataToAPI}
              size="small"
              color="primary"
              className={classes.marginTop}
            >
              Crea
            </Button>

            {/*======================TABELLA========================*/}
            <div className={classes.marginTop}>
              <TableContainer component={Paper}>
                <Table sx={{ minWidth: 650 }} aria-label="simple table">
                  <TableHead>
                    <TableRow>
                      <TableCell>Nome</TableCell>
                      <TableCell>Cognome</TableCell>
                      <TableCell align="right">azioni</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {apiData.map((data) => {
                      return (
                        <TableRow
                          sx={{
                            "&:last-child td, &:last-child th": { border: 0 },
                          }}
                        >
                          <TableCell component="th" scope="row">
                            <p>{data.firstName}</p>
                          </TableCell>
                          <TableCell component="th" scope="row">
                            <p>{data.lastName}</p>
                          </TableCell>
                          <TableCell align="right">
                            <Button
                              variant="contained"
                              color="primary"
                              size="small"
                              className={classes.aggiungiU}
                            >
                              Apri
                            </Button>

                            <Button
                              variant="contained"
                              color="primary"
                              size="small"
                              className={classes.aggiungiU}
                              onClick={() => {
                                setID(data.id);
                                handleClickOpen();
                              }}
                            >
                              Modifica
                            </Button>

                            <Button
                              variant="contained"
                              color="primary"
                              size="small"
                              className={classes.aggiungiU}
                            >
                              Cancella
                            </Button>
                          </TableCell>
                        </TableRow>
                      );
                    })}
                  </TableBody>
                </Table>
              </TableContainer>
            </div>

            {/*======================TABELLA========================*/}

            {/*================MODAL MODIFICA======================= 

            <Dialog
              open={open}
              onClose={handleClose}
              aria-labelledby="form-dialog-title"
            >
              <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
              <DialogContent>
                <DialogContentText>
                  To subscribe to this website, please enter your email address
                  here. We will send updates occasionally.
                </DialogContentText>
                <TextField
                  name="fname"
                  onChange={(e) => setFirstName(e.target.value)}
                  className={classes.textForm}
                  value={firstName}
                />
                <TextField
                  name="lname"
                  onChange={(e) => setLastName(e.target.value)}
                  className={classes.textForm}
                  id="standard-name"
                  label="Last Name"
                />
              </DialogContent>
              <DialogActions>
                <Button onClick={handleClose} color="primary">
                  Cancel
                </Button>
                <Button
                  onClick={updateDataToAPI}
                  variant="contained"
                  size="small"
                  color="primary"
                  className={classes.marginTop}
                >
                  Modifica
                </Button>
              </DialogActions>
            </Dialog>

            ================MODAL MODIFICA======================= */}
          </div>
        </div>
      </div>
    </>
  );

image