React Mobx

import React, { useState, useEffect } from 'react';
import { observer } from 'mobx-react';
import useStores from 'src/hooks/useStores';
import { Select, Button } from 'antd';
import getRequestColumns from './columns';
import getCompanyColumns from '../CompaniesTable/columns';

const { Option } = Select;
const getColumns = {
    company: getCompanyColumns,
    request: getRequestColumns,
};
export default observer(({ tableName }) => {
    const [showSelect, setShowSelect] = useState(false);

    const {
        selectedColumnsStore,
        selectedColumnsStore: { applySelectedColumns, resetSelectedColumns, selectedColumns, setState },
        authStore: { moderatorLevel },
    } = useStores();

    useEffect(() => {
        setState({ selectedColumns: selectedColumnsStore[`${tableName}AppliedColumns`] });
    }, [selectedColumnsStore, setState, tableName]);

    const handleChange = value => {
        setState({ selectedColumns: value });
    };

    const handleSave = () => {
        applySelectedColumns(tableName);
        setShowSelect(false);
    };

    const handleReset = () => {
        resetSelectedColumns(tableName);
    };

    const columnsFilteredByRole = getColumns[tableName](moderatorLevel);
    const appliedColumns = selectedColumnsStore[`${tableName}AppliedColumns`];

    return (
        <div style={{ display: 'flex', justifyContent: 'flex-end', width: '100%', marginBottom: 10 }}>
            {showSelect ? (
                <>
                    <Select
                        mode="multiple"
                        value={selectedColumns}
                        style={{ width: '100%' }}
                        placeholder="Выберите столбцы таблицы"
                        defaultValue={appliedColumns.length ? appliedColumns : []}
                        onChange={handleChange}
                    >
                        {columnsFilteredByRole.map((col, i) => (
                            <Option key={i}>{col.title}</Option>
                        ))}
                    </Select>
                    <Button style={{ margin: '0 10px' }} type="primary" onClick={handleSave}>
                        Сохранить
                    </Button>
                    <Button type="primary" onClick={handleReset}>
                        Сбросить
                    </Button>
                </>
            ) : (
                <Button onClick={() => setShowSelect(true)} type="primary">
                    Выбрать столбцы ({appliedColumns.length || columnsFilteredByRole.length}/
                    {columnsFilteredByRole.length})
                </Button>
            )}
        </div>
    );
});