Почему addItem передает пустое значение?

Question

[bad_ruby]

Всем доброго времени суток, пишу проект на Next.js React.js
Проблема заключается в том, что при нажатие на кнопку ADD клонируется определенный item но он не передает значения, то есть содержимое id name username
Я не понимаю почему значение не передается в addItem
если вывожу addItem в консоль он выводит мне пустой массив с id name username
[addItem, setAddItem] = useState(Array.from({length:config.columns.length},()=>'')),
выводиться вот так
{
"id": " ",
"name": " ",
"username":" "
}

export const
    config = {
        columns: [
            { title: 'id', content: ({ id }) => id, setVal: id => ({ id }) },
            { title: 'name', content: ({ name }) => name, setVal: name => ({ name }) },
            { title: 'username', content: ({ username }) => username, setVal: username => ({ username }) },

        ]
    };

import { config } from "../configs/jsph"
import classes from "./Jsph.module.css";
import useSWR from "swr";
import toast from "react-hot-toast";
import { ObjTable } from "../ObjTable";
import { SearchForm } from "../SearchForm/Search";
import { useState } from "react";


const
  ADD = 'add',
  API_URL = "http://localhost:3333/users",
  CART_URL = "http://localhost:3333/cart",
  fetcher = async () => {
    const res = await fetch(API_URL);
    if (!res.ok) throw new Error("fetcher" + res.status);
    return await res.json();
  },
  infofetcher = async () => {
    console.log("infofetcher",);
    const pr = fetcher();
    toast.promise(pr, {
      loading: 'Загрузка',
      success: 'Авто-обновление',
      error: (err) => `${err.toString()}`,
    });
    return await pr
  },
  columns = config.columns.concat(
    { title: "", content: () => <button data-action={ADD}>add</button> }
  )
export function JSPHTable() {
  const
    { data, error, isLoading, isValidating, mutate } = useSWR(API_URL, infofetcher, { revalidateOnFocus: false }),
    [addItem, setAddItem] = useState(Array.from({length:config.columns.length},()=>'')),
    onClick = async event => {
      const
        action = event.target.closest('[data-action]')?.dataset?.action,
        id = +event.target.closest('[data-id]')?.dataset?.id;
      console.log(action, id);
      console.log(addItem)
      if (!action) return;
      let
        optimisticData;
      const
        getPromise = () => {
          switch (action) {
            case ADD:
              const newObj = {};
              config.columns.map(({setVal},i)=> setVal && Object.assign(newObj,setVal(addItem[i])));
              optimisticData = data.concat(newObj);
              return fetch(API_URL,
                {
                  method: 'POST',
                  headers: {
                    'Content-Type': 'application/json'
                  },
                  body: JSON.stringify(newObj)
                }).then(res => {
                  if (!res.ok) {
                    throw new Error(res.status + " " + res.statusText);
                  }
                });


          }
        },
        promise = getPromise();

      if (promise) {
        toast.promise(promise, {
          loading: "Fetching" + action,
          success: 'ok',
          error: (err) => `${err.toString()}`,
        });
        await mutate(promise.then(optimisticData, fetcher), { optimisticData });
      };
    };
  return <>
    <div
      className={classes.loading}>
      {isLoading && '⌛'}
      {isValidating && ''}
      {error && `❌ ${error.toString()}`}
    </div>
    <header>
      {data && <SearchForm data={data} config={{ columns }} />}
    </header>
    <main onClick={onClick} >
      {data && <ObjTable data={data} config={{ columns }} />}
    </main>
  </>
}

import Link from "next/link";
import { FaShoppingCart } from "react-icons/fa";

const 
    pages = [
      {href: '/', title:'Главная'},
      {href: '/shopping-cart', title:'Корзина'},
    ];

export function PagesWebsite() {
    return  <nav>
        <ul>
           {pages.map(({href, title})=>
           <li key={href}>
            < Link href={href}>
            {title}
            </Link>
           </li>)}
        </ul>
    </nav>
}