React函数组件集成Tabulator：无法访问DOM节点求助

因为React-Tabulator库已过时，我改用Tabulator官方的原生JS方式集成到React项目中。把官方示例转成React函数组件后，表格能正常渲染，但没法访问表格实例来调用selectRow、getData这类方法。

我知道这和ref有关，但试了好几种方法都没解决。我的需求是用下拉选择框，根据选中的内容按行ID选中表格里的对应行，现在核心问题就是拿不到表格实例——当前获取的节点一直是undefined或者null。

我的函数组件代码 #

import { TabulatorFull as Tabulator } from "tabulator-tables";
import { useEffect, useRef } from "react";
import "tabulator-tables/dist/css/tabulator.min.css";
import "tabulator-tables/dist/css/tabulator_semanticui.min.css";

const Table = ({ data, columns, options }) => {
    const ref = useRef();

    useEffect(() => {
        new Tabulator(ref.current, {
            data: data,
            columns: columns,
            ...options,
        });
    }, [columns, data, options]);

    return <div ref={ref} className="celled compact" />;
};

export default Table;

组件调用代码 #

<Table data={sources.data.source_data} columns={sourceColumns} options={{layout: "fitColumns"}} />

内容的提问来源于stack exchange，提问作者Nate