How to programmatically connect a search datasource to a Splunk visualization (without using the dashboard)

DSTable.jsx

import React, { useState } from 'react';

import Table from '@splunk/visualizations/Table';
import { SplunkSearch } from '@splunk/datasources';

const DSTable = () => {
    const [dsResult, setDsResult] = useState(null);
    const ds = new SplunkSearch({
        query: '| inputlookup example_kv',
        queryParameters: {
            earliest: '0',
        },
    });
    ds.setup();
    ds.request({ offset: 0, count: 10 })({
        next: (x) => setDsResult(x),
        error: (err) => console.error(err),
        complete: () => console.log('Observer got a complete'),
    });

    return (
       <Table options={{}} dataSources={{ primary: dsResult }} />
    );
};

DSTable.config = {
    key: 'splunk.DSTable',
    name: 'DSTable',
};

DSTable.propTypes = {};

DSTable.defaultProps = {};

export default DSTable;