React tabulator ref становится нулевым при повторном рендеринге

Я использую Tabulator с React, используя модуль react-tabulator.

Я использовал «ref» для компонента таблицы и вызывал такие действия, как загрузка данных или что-то еще.

import React, { Suspense, useEffect, useReducer, useRef } from 'react';
import PropTypes from 'prop-types';

import "react-tabulator/lib/styles.css"; // default theme
import "react-tabulator/css/tabulator_midnight.min.css";

import {Button } from 'react-bootstrap';
import { ReactTabulator, reactFormatter } from "react-tabulator";
import { reducer } from '../common/reducer';
import ChangeStaffCompetency from './ChangeStaffCompetency';
import * as jsPDF from 'jspdf';
import 'jspdf-autotable';
window.jspdf = jsPDF;

const luxon = require('luxon');
window.DateTime = luxon.DateTime;

// Initial states of StaffCompetency
const initialState = {
    changeStaffCompetencyShow: false,
    staffID: "",
    workflowName: "",
    competentTasks: "",
    competencyEditorRow: null,
};

const StaffCompetency = (props) => {

    // State Handling
    const [state, dispatch] = useReducer(reducer, initialState);
    
    // Reference for the tabulator
    let staffCompetencyTableRef = useRef(null);

    // Action to download workloads data as 'JSON'
    const downloadAsJSON = () => {
        staffCompetencyTableRef.current.download("json", "RTP_Staff_Competencies.json");
    }

    /***
     * ALL OTHER CODE
     */

    return (
        <>
            <h3 className = "text-center"> Staff Competency </h3>
            <div>
                <Button variant = "dark" onClick = {() => downloadAsJSON()}>Download JSON</Button>{' '}
            </div>
            <div style = {{clear: 'both'}}></div>
            <br></br>
            <ReactTabulator
                onRef = {(r) => (staffCompetencyTableRef = r)}
                columns = {staffCompetencyTableCoumns}
                options = {staffCompetencyTableOptions}
            />
            <ChangeStaffCompetency
                show = {state.changeStaffCompetencyShow}
                onHide = {() => dispatch({ type: "changeStaffCompetencyShow", value: false })}
                staffID= {state.staffID}
                workflowName= {state.workflowName}
                competentTasks= {state.competentTasks}
                api = {props.api}
                parentCallback = {handleCallback}
            />
        </>
        
    );
}

StaffCompetency.propTypes = {
    api: PropTypes.object.isRequired
};

export default StaffCompetency;

ChangeStaffCompetency — это модальный компонент react-bootstrap, который используется в качестве пользовательского редактора для редактирования содержимого ячейки.

staffCompetencyTableRef отлично работает на первом рендере, но становится null при повторном рендеринге; например, когда я открываю и закрываю модальное окно ChangeStaffCompetency.

Как бы я решил это?

Спасибо