Как создать редактируемую таблицу React с компонентом таблицы NextUI

Я построил таблицу с компонентом таблицы NextUI, и хотя я определил onChange для своих элементов ввода, в них невозможно ввести значение.

Я пробовал различные элементы, и если я заменю таблицу NextUI стандартной таблицей HTML, этот компонент React будет работать без проблем.

Это код компонента React, который должен возвращать редактируемую таблицу на основе компонента таблицы NextUI. Что не так с кодом этого компонента?

import { useState } from 'react'
//import './index.css'
import { Table, Row, Col, Tooltip, User, Text } from "@nextui-org/react";
import { Input, Spacer } from "@nextui-org/react";

const data = [
    {
        employeeId: '01',
        name: 'John Doe',
        email: '[email protected]',
        position: 'Frontend Developer',
    },
    {
        employeeId: '02',
        name: 'Sara',
        email: '[email protected]',
        position: 'HR Executive',
    },
    {
        employeeId: '03',
        name: 'Mike',
        email: '[email protected]',
        position: 'Backend Developer',
    },
]

const EditableTable = () => {
    const [employeeData, setEmployeeData] = useState(data)

    const onChangeInput = (e, employeeId) => {
        const { name, value } = e.target

        const editData = employeeData.map((item) =>
            item.employeeId === employeeId && name ? { ...item, [name]: value } : item
        )

        setEmployeeData(editData)
    }

    return (
        <div className = "container">


            <h1 className = "title">ReactJS Editable Table with NextUI Table</h1>
            <Table
                aria-label = "Example table with static content"
                css = {{
                    height: "auto",
                    minWidth: "100%",
                }}
            >
                <Table.Header>
                    <Table.Column>NAME</Table.Column>
                    <Table.Column>ROLE</Table.Column>
                    <Table.Column>STATUS</Table.Column>
                </Table.Header>
                <Table.Body>
                    {employeeData.map(({ employeeId, name, email, position }) => (
                        <Table.Row key = {employeeId}>
                            <Table.Cell>
                                <Input
                                    aria-label = "test"
                                    name = "name"
                                    value = {name}
                                    type = "text"
                                    onChange = {(e) => onChangeInput(e, employeeId)}

                                />
                            </Table.Cell>
                            <Table.Cell>
                                <Input
                                    aria-label = "test"
                                    name = "name"
                                    value = {position}
                                    type = "text"
                                    onChange = {(e) => onChangeInput(e, employeeId)}
                                />
                            </Table.Cell>
                            <Table.Cell>
                                <Input
                                    aria-label = "test"
                                    name = "name"
                                    value = {email}
                                    type = "text"
                                    onChange = {(e) => onChangeInput(e, employeeId)}

                                />

                            </Table.Cell>
                        </Table.Row>
                    ))}
                </Table.Body>
            </Table>



        </div>
    )
}

export default EditableTable