• This is important when using React hooks

Fixes #3620

In my case, I'm using the Table and passing a onCollapse method within a React component that uses hooks.

I need the columns that are a function, but a different one, to be updated, I'm using as example onCollapse, but this applies to any other column.

Consider below code:

interface RowState {
    isOpen: boolean;
    // more stuff
}

export const PolicyTable: React.FunctionComponent<PolicyTableProps> = (props) => {

    const [ rowsState, setRowsState ] = React.useState<Record<string, RowState>>({});

    const onCollapse = (_event, idx: number, isOpen: boolean) => {
        const rowState = { ...rowsState[idx], isOpen };
        const newRowsState = { ...rowsState };
        newRowsState[idx] = rowState;
        setRowsState(setRowsState);
    }

    // Other props not show for simplicity
    return <Table
        onCollapse={ onCollapse }
    />
}

With this in place, on first render, all the rows have my initial rowState value.
If i click the first cell, only that cell is going to have the updated rowState (where it is open) and the others will have the old rowState (nothing open).
When clicking the second row, it will discard my modified rowState (because this cell doesn't have access to it) and only open what I clicked.

See below gif without the contents of this PR:

and with this PR content: