Table Component Checkbox Selection Issue

[darundevs]

trafficstars

When I select the checkbox, I don't get the active checkbox state, resulting in multiple duplicated selected items.

Source :

"use client";

import React, { useState } from 'react';
import { Table } from '@bigcommerce/big-design';

interface Item {
  sku: string;
  name: string;
  stock: number;
}

export default function Example() {
  const [selectedItems, setSelectedItems] = useState<Item[]>([]);

  const columns = [
    {
      header: 'SKU',
      hash: 'sku',
      render: ({ sku }: Item) => sku,
    },
    {
      header: 'Name',
      hash: 'name',
      render: ({ name }: Item) => name,
    },
    {
      header: 'Stock',
      hash: 'stock',
      render: ({ stock }: Item) => stock,
    },
  ];

  const data: Item[] = [
    { sku: 'SM13', name: '[Sample] Smith Journal 13', stock: 25 },
    { sku: 'DPB', name: '[Sample] Dustpan & Brush', stock: 34 },
    { sku: 'OFSUC', name: '[Sample] Utility Caddy', stock: 45 },
    { sku: 'CLC', name: '[Sample] Canvas Laundry Cart', stock: 2 },
    { sku: 'CGLD', name: '[Sample] Laundry Detergent', stock: 29 },
  ];

  const handleSelectionChange = (selectedItems: Item[]) => {
    setSelectedItems(selectedItems);
    console.log('Selected items:', selectedItems);
  };

  return (
    <Table
      columns={columns}
      items={data}
      itemName="Products"
      keyField="sku"
      selectable={{
        onSelectionChange: handleSelectionChange,
        selectedItems: selectedItems,
      }}
    />
  );
}