useState问题 多个闭包

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Table, Button } from "antd";

function MyComponent() {
  const [data, setData] = useState([]);

  const [columns] = useState(genColumns());
  const columns2 = genColumns();

  function genColumns() {
    return [
      {
        title: "Name",
        dataIndex: "name",
        key: "name"
      },
      {
        title: "Action",
        key: "action",
        render: (text, record) => (
          <Button
            type="primary"
            onClick={() => {
              console.log(record, data);
            }}
          >
            Delete
          </Button>
        )
      }
    ];
  }

  // 100ms 获取数据
  useEffect(() => {
    setTimeout(() => {
      setData([
        {
          key: "1",
          name: "张三"
        }
      ]);
    }, 100);
  }, []);

  return (
    <div>
      <p>表格1---------</p>
      <Table
        columns={columns}
        size="small"
        pagination={false}
        dataSource={data}
      />

      <br />

      <p>表格2---------</p>
      <Table
        columns={columns2}
        size="small"
        pagination={false}
        dataSource={data}
      />
    </div>
  );
}

ReactDOM.render(<MyComponent />, document.getElementById("container"));