React correctly fills useState value, then resets it

tldr; Component correctly loads data with help of a HOC, but that data appears to be an empty array later when it needs to be updated.

I have a MyTablePage, a MyTable, and a withNetworking Component.

The withNetworking code is intended to provide REST services in a HOC style (I don't fully understand HOC, so apologies if I'm using it incorrectly here -- React as a whole isn't exactly my usual programming environment).

return <div>
            <Component {...props} componentData={retrievedData ? retrievedData : defaultFetchResult} />
        </div>

MyTable is the gist of the code I'm writing, and provides a table with data loaded via withNetworking when the MyTableWithData (see MyTablePage, next) is loaded. It also provides a couple of buttons per row that make REST calls to manipulate the data on the backend and then update the UI accordingly.

// Table is an antd table, for the curious
return (
        <Table
            size="middle"
            scroll={{x: 1500}}
            dataSource={tableData ? tableData : []}
            columns={tableColumns}
            sticky
        />
    );

MyTablePage creates a MyTableWithData component:

    const MyTableWithData = withNetworking(MyTable, myDataTableProps);

    ....

    <MyTableWithData
        onB1Press={onB1Click}
     />

When the MyTable array Component mounts, I see the that the values do get set properly, based on data loaded through withNetworking. Both console logs here, in the following code, end up with 11 records provided from the backend service. Not sure which one should be in the watch array parameter, so I have both for now.

    const [tableData, setTableData] = useState([]);
    useEffect(() => {
        (() => {
            setTableData(componentData);
            console.log('COMPONENTData',componentData);
            console.log('TABLEData',tableData);
        })();
    }, [componentData, tableData]);
//COMPONENTData (11) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] MyTable.js:25
//TABLEData [] MyTable.js:26
//COMPONENTData (11) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] MyTable.js:25
//TABLEData (11) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]  MyTable.js:26

Clicking one of the buttons starts with a useCallback function defined in MyTable, which immediately calls onB1Click (defined in MyTablePage) to do some additional manipulation of the raw data returned from the server, so that the MyTable Component doesn't need to know the details of the raw data, itself. That detail is left to the MyTablePage onB1Click code.

Console logs show that onB1Click correctly returns the expected object to the button handler inside MyTable. At this point, I would like to update my data and see it reflected in my UI. The problem is that my state value, tableData (as well as componentData), in MyTable is now logging as an empty array from within my button press handler.

Now, I suspect that I will, in the future, have a problem in that manipulating the array won't necessarily force the Component(s) to update. I accept that as my next item to work out. But I am not ready to address that until I can discover why my state value has returned to an empty array, which clearly is not what I'm expecting.