Is there a pattern to make multiple fetch calls with HOC and hooks?

I want to create something like follows:

<FetchApi data="users" render={(users) => {
   { users
        .map(u => (<FetchApi data="debts" where= 
           render={(d) => (<><div>{u.name}<div><div>d.totalDebt</div></>)} />)
}>
</FetchApi>

So basically, each FetchApi component does something and it can be combined as we nest it with other components of the same type...

<FetchApi ...something
   <FetchApi ...somethingElse
      <FetchApí ...andOneMore
         <Component {...something, ...somethingElse, ...andOneMore}

Is this something that is advisable to do? Is there a more efficient way to achieve the same result? this approach is mainly because I'm working on a "framework" so I need to provide a common interface to fetch data and aggregate it.

Currently FetchApi works , internally uses hooks but it gets complicated when the children FetchApi instances depend on previous calls, hooks seem to be not the right answer for this, in addition to this Mobx is the chosen state management library, what would you do in my place?