I’m trying to make a component where the input row can increased if I press add PC

The API only consists of ID and name and I want to console log the user’s input in array forms (PC name, zone ID (no need to console log the name), and the IP

but the zone ID always appears undefined/null/empty

"use client";

import NextButton from "@/components/ui/button";
import { Button, Input } from "@nextui-org/react";
import React, { useState, useEffect } from "react";
import { BsFillTrashFill as Delete } from "react-icons/bs";
import { Autocomplete, AutocompleteItem } from "@nextui-org/react";

const App = () => {
  const [pcs, setPCs] = useState([{ pcName: "", zona: null, ip: "" }]);
  const [zonaOptions, setZonaOptions] = useState([]);

  useEffect(() => {
    fetch("http://localhost:3001/getAllZona")
      .then((response) => response.json())
      .then((data) => setZonaOptions(data));
  }, []);

  const addPC = () => {
    setPCs([...pcs, { pcName: "", zona: null, ip: "" }]);
  };

  const deletePC = (index) => {
    const updatedPCs = [...pcs];
    updatedPCs.splice(index, 1);
    setPCs(updatedPCs);
  };

  const handleInputChange = (index, e) => {
    const { name, value } = e.target;
    const updatedPCs = [...pcs];
    updatedPCs[index][name] = value;
    setPCs(updatedPCs);
  };

  const handleZonaChange = (index, zona) => {
    const updatedPCs = [...pcs];
    updatedPCs[index].zona = zona;
    setPCs(updatedPCs);
  };

  const handleSubmit = () => {
    console.log(
      "PCs:",
      pcs.map((pc) => ({ pcName: pc.pcName, zona: pc.zona?.id, ip: pc.ip }))
    );
  };

  return (
    <div className="m-5">
      <NextButton
        className="mb-3"
        onClick={addPC}
        label="Add PC"
        level="primary"
        radius="full"
      ></NextButton>
      {pcs.map((pc, index) => (
        <div key={index} className="flex justify-stretch mb-3">
          <div className="items-center mr-3">
            <Input
              type="text"
              name="pcName"
              label="PC Name"
              value={pc.pcName}
              onChange={(e) => handleInputChange(index, e)}
              placeholder="PC Name"
              labelPlacement="outside"
              variant="bordered"
            ></Input>
          </div>
          <div className="items-center mr-3">
            <Autocomplete
              defaultItems={zonaOptions}
              label="Zona"
              placeholder="Search a Zona"
              className="max-w-xs"
              variant="bordered"
              labelPlacement="outside"
              value={pc.zona?.id}
              onChange={(e) => handleZonaChange(index, e.id)}
            >
              {(zona) => (
                <AutocompleteItem key={zona.id}>{zona.name}</AutocompleteItem>
              )}
            </Autocomplete>
          </div>
          <div className="items-center mr-3">
            <Input
              type="text"
              name="ip"
              label="IP"
              value={pc.ip}
              onChange={(e) => handleInputChange(index, e)}
              placeholder="IP"
              labelPlacement="outside"
              variant="bordered"
            ></Input>
          </div>
          <div className="flex items-end">
            <NextButton
              size="sm"
              onClick={() => deletePC(index)}
              label={<Delete />}
              isIconOnly
              radius="full"
              level="secondary"
            ></NextButton>
          </div>
        </div>
      ))}
      <NextButton
        onClick={handleSubmit}
        label="Submit"
        level="primary"
        radius="full"
      ></NextButton>
    </div>
  );
};

export default App;

this is my code. i’ve tried to change the HandleZonaChange using another approach (already delete it i’m sorry) but the zone id in the console log still undefined or null