Check and display one column in the known table column

import React, {
    useEffect, useState} from 'react';
import {
    Table,Checkbox,} from 'antd'
const columns = [
    {
    
        title: 'ID',
        dataIndex: 'user_id',
        key: 'user_id',
        width: 100,
    },
    {
    
        title: ' nickname ',
        dataIndex: 'nickname',
        key: 'nickname',
        width: 150,
    },
    {
    
        title: ' cell-phone number ',
        dataIndex: 'phone',
        key: 'phone',
        width: 150,
    },
    {
    
        title: ' balance ',
        dataIndex: 'balance',
        key: 'balance',
        width: 150,
    },
    {
    
        title: ' Platform service fee ',
        dataIndex: 'service_charge',
        key: 'service_charge',
        width: 150,
    },
    {
    
        title: ' Gender ',
        dataIndex: 'sex',
        key: 'sex',
        width: 150,
    },
    {
    
        title: ' Continuous login days ',
        dataIndex: 'login_day',
        key: 'login_day',
        width: 200,
    },
    {
    
        title: ' Maximum number of consecutive login days ',
        dataIndex: 'login_bigday',
        key: 'login_bigday',
        width: 200,
    },
    {
    
        title: ' Landing time ',
        dataIndex: 'login_time',
        key: 'login_time',
        width: 200,
    },
    {
    
        title: ' Time to join ',
        dataIndex: 'join_time',
        key: 'join_time',
        width: 200,
    },
    {
    
        title: ' state ',
        dataIndex: 'status',
        key: 'status',
        width: 150,
    },
]

// The drop-down 
const plainOptions = [
    {
     label: 'ID', value:'user_id'  },
    {
     label: ' nickname ', value: 'nickname'},
    {
     label: ' cell-phone number ', value:'phone' },
    {
     label: ' balance ', value: 'balance'},
    {
     label: ' Platform service fee ', value:'service_charge'},
    {
     label: ' Gender ', value: 'sex' },
    {
     label: ' Continuous login days ', value:'login_day'  },
    {
     label: ' Maximum consecutive login days ', value: 'login_bigday'},
    {
     label: ' Landing time ', value:'login_time' },
    {
     label: ' Time to join ', value: 'join_time'},
    {
     label: ' state ', value:'status'},
];

const TableTreeChange = () => {
    
    // Put the selected value Set it to be responsive to update the interface 
    const [selectColum,setSelectColum]=useState(columns)
    // Originally selected by default value value 
    const [checkedList, setCheckedList] = useState(['user_id']);

    //  Put the multiple choices you checked into an array 
    const onChange = (list) => {
    
        setCheckedList(list)
    };
    useEffect(() => {
    
        console.log(checkedList,66666666666666666)
        // Use double for Cycle the selected value And columns in the table key Values are linked 
        let newList=[]
        for (let i = 0; i < checkedList.length; i++){
    
            for (let j = 0; j < columns.length; j++){
    
                if (checkedList[i] == columns[j].key) {
    
                    newList.push(columns[j]);
                }
            }
        }


        // The following part of the code is to add a fixed operation column to the table , If you don't need it, you can ignore 
        newList.push({
    
            title: ' operation ',
            key: 'action',
            render: (text, record) => (
                <span>
                    <a>edit</a>
                </span>
            ),
            width: 100,
            fixed: 'right',
        })
        setSelectColum(newList)
    }, [checkedList])
    return (
        <div>
            <Table
                columns={
    selectColum}
                pagination={
    false}
            />
            <Checkbox.Group options={
    plainOptions} value={
    checkedList} onChange={
    onChange} />
        </div>
    );
};

export default TableTreeChange;