Adding new tables in React and Typescript

Question

I was told that a React table can be made using an object representation of the table. For example:

{
    tableSeq : 1,
}

With this in mind, if I were to add this, the first row will be the output. If I were to add the 'tableSeq : 2', row 2 would be the output, and so on. Our table can be made this way, but I don't know where exactly to add it/pass it in. I believe it's a prop.

import React, { useState, useMemo } from "react";
import Row from "@components/Row";
import Col from "@components/Col";
import Table, { ICol } from "@components/Table";

export default function variableNames() {
  const [selected, setSelected] = useState({
    name: "NNNN",
    value: 0
  });
  const [searchArea, setSearchArea] = useState({ label: "NN", value: "id" });
  const [searchData, setSearchData] = useState("");

  const { variableNamee } = usevariableNamee(selected);

  const onChangeSelect = (option) => {
    setSelected(option);
  };

  const onChangeOpt = (option) => {
    setSearchArea(option);
  };

  const onChangeDate = (date) => {
    console.log(date);
  };

  const [surveillance] = useSurveillance({
    page: 0,
    size: 0
  });

  console.log(surveillance);

  const col: ICol[] = [
    {
      title: "nn",
      dataIndex: "mmm",
      tfoot:"",
    }, {
      title: "nnnn",
      dataIndex: "mmmm",
      tfoot:"",
    }, {
      title: "nnnn",
      dataIndex: "mmmm",
      tfoot:"",
    }, {
      title: "nnn",
      dataIndex: "mmm",
      tfoot:"",
    }, {
      title: "nnn",
      dataIndex: "mmm",
      tfoot:"",
    }, {
      title: "nnnnn",
      dataIndex: "mmm",
      tfoot:"",
    }, {
      title: "nnnn",
      dataIndex: "mmmm",
      tfoot:"",
    }, {
      title: "nnnnnn",
      dataIndex: "mmm",
      tfoot:"",
    }, {
      title: "nnn",
      dataIndex: "mmm",
      tfoot:"",
      render: (value: any, data: any) => <button type="button" onClick={() => console.log(data)}>{value}</button>
    }
  ];

  const periods = [
    { label: "qqq", value: 1 },
    { label: "qqq", value: 2 },
    { label: "qqq", value: 3 },
    { label: "qqq", value: 4 },
    { label: "qq", value: 5 }
  ];

  const searchOpt = [
    { label: "qqq", value: "id" },
    { label: "qqqqq", value: "name" },
    { label: "qqqq", value: "something" }
  ];

  const handleSearchData = () => {

  };

  const generatorStatusDefaultValue = useMemo(() => {
    return { label: "qqqqqq", value: 0 };
  }, []);

  return (
    <div>
      <Row justifyContent="flex-start">
        <Col width={147} mr={10}>
          <Select
            onSelect={onChangeSelect}
            options={periods}
            defaultValue={generatorStatusDefaultValue}
            selectKey="value"
            labelKey="label"
          />
        </Col>
        <Col width={134} mr={10}>
          <Select
            onSelect={onChangeOpt}
            options={searchOpt}
            defaultValue={{ label: "qqqq", value: "id" }}
            selectKey="value"
            labelKey="label"
          />
        </Col>
        <Col width={160} mr={10}>
          <Select
            onSelect={onChangeOpt}
            options={searchOpt}
            defaultValue={{ label: "qqqq", value: "id" }}
            selectKey="value"
            labelKey="label"
          />
        </Col>
        <Col width={105} mr={10}>
          <Select
            onSelect={onChangeSelect}
            options={periods}
            defaultValue={{ label: "qqqq", value: 0 }}
            selectKey="value"
            labelKey="label"
          />
        </Col>
        <Col width={215} mr={10}>
          <DatePicker onChangeDate={onChangeDate} disabled={selected.value !== 4} format={"yyyy.MM.dd"}
                      isRange={true} />
        </Col>
        <Col width={180}>
          <BorderedMiniInput
            value={searchData}
            onChange={setSearchData}
            icon={"icon_input_search"}
            iconSize={14}
            onClick={() => console.log("search : ", searchData)}
            placeholder="qqqqq"
          />
        </Col>
      </Row>
      <Row>
        <Col width={"100%"}>
          <Table data={contractMembers} col={col} keyItem="seq" checkable={true} />
        </Col>
      </Row>
    </div>
  );
}

Just trying to add a new row to the table.