Create a Collapsible Table with Editable Rows in React using MUI

create collapsible table with textbox in every row, which will become editable on click of an edit button placed below it on right hand corner. there is a cancel button which will cancel any editing done in the textbox. every row can be collapsible or expanded individually and only text written should be visible in collapsed state. By default all rows will be in expanded form