How to draw an array list with 3rd depth?

interface ISubscriptionDetail {
  id: number;
  member_name: string;
  member_id: string;
  subscription_id: string;
  product_name: string;
  quantity: number; 
  round: string;
  delivery_cycle: string;
  last_order_date: string;
  last_order_count: number;
  expect_order_date: string;
}

interface ISubscription {
  [key: string]: ISubscriptionDetail[];
}

interface IMember {
  id: number;
  member_name: string;
  subscriptions: ISubscription[];
}

interface ISubscriptionDetail {
  id: number;
  member_name: string;
  member_id: string;
  subscription_id: string;
  product_name: string;
  quantity: number; 
  round: string;
  delivery_cycle: string;
  last_order_date: string;
  last_order_count: number;
  expect_order_date: string;
}

interface ISubscription {
  [key: string]: ISubscriptionDetail[];
}

interface IMember {
  id: number;
  member_name: string;
  subscriptions: ISubscription[];
}

const columns = React.useMemo<GridColDef<IMember>[]>(
    () => [
      {
        field: 'member_name',
        flex: 1,
        headerName: '회원 닉네임 (아이디)',
        groupable: true,
        minWidth: 150,
        renderCell: function render({ row }) {
          const memberName = row.member_name
          const memberEmail = row.member_id
          return (
            <>
              <div>
                {memberName}
                <br />
                {memberEmail}
              </div>
            </>
          )
        },
      },
      {
        field: 'subscription_id',
        flex: 1,
        headerName: '정기구독 신청번호',
        minWidth: 150,        
        renderCell: function render({ row }) {
          return (
            <>
              <div>
                
              </div>
            </>
          )
        }
      },
      {
        field: 'product_name',
        flex: 1,
        headerName: '상품명',
        minWidth: 150,
        renderCell: function render({ row }) {
          return (
            <>
              <div>
                {row.product_name}
              </div>
            </>
          )
        },
      },

const columns = React.useMemo<GridColDef<IMember>[]>(
    () => [
      {
        field: 'member_name',
        flex: 1,
        headerName: '회원 닉네임 (아이디)',
        groupable: true,
        minWidth: 150,
        renderCell: function render({ row }) {
          const memberName = row.member_name
          const memberEmail = row.member_id
          return (
            <>
              <div>
                {memberName}
                <br />
                {memberEmail}
              </div>
            </>
          )
        },
      },
      {
        field: 'subscription_id',
        flex: 1,
        headerName: '정기구독 신청번호',
        minWidth: 150,        
        renderCell: function render({ row }) {
          return (
            <>
              <div>
                
              </div>
            </>
          )
        }
      },
      {
        field: 'product_name',
        flex: 1,
        headerName: '상품명',
        minWidth: 150,
        renderCell: function render({ row }) {
          return (
            <>
              <div>
                {row.product_name}
              </div>
            </>
          )
        },
      },