react-table expansion is not working inside popover

Question

I'm using react-table across the site was working fine, I tried to use react-table inside popover the table was displayed but the expansion of row is not working, while checking DOM the expansion click was happening and data was rendered for a fraction of second and gone.

import { OverlayTrigger, Popover } from 'react-bootstrap';
import ReactTable from 'react-table';

export const sampleTable = observer(class sampleTable extends React.Component {
const table = <ReactTable data={tableData} pivotBy={["parent"]} columns={tableColumn}  />
return (<>
<OverlayTrigger className="popover"
 popperConfig={{ modifiers: { preventOverflow: { enabled: false } } }} 
 placement={row.distance < 400 ? "auto" : "left"} 
 trigger="click" rootClose overlay={<Popover>{table}</Popover>}> 
<p>some data </p>
</OverlayTrigger> 
</>);
}

Answer 1

finally found the solution, popover is re-rendering on data change, by default react-table will collapse the row on re-render,avoid that by adding collapseOnDataChange: false

P.S: using mobx.js for store