failed to get the value of nextui autocomplete

[diabolicdaredevil]

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

i try to make something like this

i'm new to nextUI and nextJS so i'm very confused

`"use client";

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 (

Add PC

{pcs.map((pc, index) => (

<Input
type="text"
name="pcName"
label="PC Name"
value={pc.pcName}
onChange={(e) => handleInputChange(index, e)}
placeholder="PC Name"
labelPlacement="outside"
variant="bordered"
>

<Autocomplete
defaultItems={zonaOptions}
label="Zona"
placeholder="Search a Zona"
className="max-w-xs text-black"
variant="bordered"
labelPlacement="outside"
value={pc.zona?.id}
onChange={(e) => handleZonaChange(index, e.id)}
>
{(zona) => (
{zona.name}
)}

<Input
type="text"
name="ip"
label="IP"
value={pc.ip}
onChange={(e) => handleInputChange(index, e)}
placeholder="IP"
labelPlacement="outside"
variant="bordered"
>

<Button
size="sm"
onClick={() => deletePC(index)}
isIconOnly
radius="full"
color="secondary"
>

))}

Submit

);
};

export default App;
`