Is this a good pattern to implement an admin-list react component?

I have different modules like profile, contact, and news. They all use a single component to display the admin list and modify the records called <AdminTable />.

<AdminTable /> uses the Compound Components and Custom Hooks patterns to display either tabs, table, or form component. 1 - Admin table tabs-mode image

<AdminTable
  {...{
    columns, // table columns
    listItems, // list of records
    callback, // CRUD operations callback
    moduleInfo,
    defaultTab,
  }}
>
  // when displaying the admin list in the tabs mode. (image 1)
  <AdminTable.Tabs />
</AdminTable>

In the module form component, another <AdminTable /> component displays the <AdminTable.Form /> component. 2- Admin table form-mode image - edit record

<AdminTable
  {...{
    columns, // table columns
    listItems, // list of records
    callback, // CRUD operations callback
    moduleInfo,
    defaultTab,
  }}
>
  // When users click on the edit button - a new edit form tab opens. (image 2)
  <AdminTable.Form />
</AdminTable>

Everything works fine until now, the situation gets tricky when I have a child module like this.

3 - admin table child module table image

The profile module has its own admin list - each profile record has a child module called education where I face with nested admin table components.

When we edit records from the education child module admin list, a drawer edit-form pops up, rather than opening a new tab (Please see image below).

4 - admin table child module - edit record image

Now the problems I have

1. In the first version, I used react context + react reducer hook to keep the parent open tabs state. However, when I have the nested <AdminTable /> situation like the profile module, the child module refreshes the parent component and the state will be removed.

To fix this problem, I moved the open tabs state from the React reducer to the Redux store.

2. When I want to edit the child module record (image 4) the drawer edit-form opens. I use React Query for the CRUD operations.

In this case all the parent components re-renders. Is this a good pattern to manage parent child modules like this? I mean using the Compound Components and Custom Hooks patterns like this.

// profile admin list
<AdminTable>  
  <AdminTable.Tabs />
  . . .

    // child module - education admin list   
    <AminTable>         
       <AdminTable.Tabs />
         . . .              

         // child module - education edit form
         <AminTable>         
           <AdminTable.Form />
         </AdminTable>

    </AdminTable>

</AdminTable>