To get certain data, I need to call multiple custom hooks, all of which are making api requests to get some data, then after each call, I need to use gotten data to pass to the next custom hook to get the next data.

• If I put the all the calls except the first one into a useEffect hook and the needed data into the dependency array this will give me an error as I cant call custom hooks conditionally inside an effect.
• Or should I call the first one inside a useEffect, then storing result in state and then just have a simple if statement, so if there is state, call the other hooks

const useSomeCustomData = ({ids}) => {
  const { data: firstData } = useFirstData({
    ids: ids,
  });
  const investmentIds = firstData?.investments.map(
    (investment) => investment?.id
  );
  //next one depending on previously gotten investmentIds
  const { data: secondData } = useSecondData({
    investmentId: investmentIds ? investmentIds : undefined,
  });
  const start = secondData?.products?.map((product) => {
    return product.date;
  })[0];
   //next one depending on previously gotten "start" from secondData
  const { data: thirdData } =
    useThirdData({
      startDate: start,
    });
}