Antd expandable table, expand child component on click

Question

I'm using an expandable table from antd design v4.10 in my react app. When I click on the + button table row expands but one of the child components needs to have a + button (in my case doc.students) which should expand and show its own data.

const _data = prop.result.map((doc) => {
      return {
        ...doc,
        ... {
          key: doc.id 
          text: (
            <small>
              {doc.name}
            </small>
          ),
          original_text: doc.name
        }
      };
    });

<Table
        pagination={paginationOptions}
        columns={columns}
        dataSource={data}
        expandable={{
            expandedRowRender: doc =>         
            <>
            { doc.students.map((student, i) => {
                          return <>
                           <ul>
                             <li>student id: {student.uid}</li>
                             <li>student name: {student.name}</li>
                           </ul>
                           </>
                         })
             }
             <ul>
                <li>course id:{doc.course_id}</li>
                <li>course Name:{doc.course_name}</li>
              </ul>   
           </>,
          }}
        rowSelection={rowSelection}
      />

It's similar to tree data given in antd documentation but I don't want child components to have a checkbox, so I choose the different approach of using expandable property but again I am stuck in the same situation. How is it possible to achieve the below result using either the tree-data approach or something like expandable inside expandable?

https://ant.design/components/table/#components-table-demo-tree-data

This is the final result I am trying to get: