> The mechanism that enables code reusability is through composing components

If you think that this:

   return (
     <Apple>
       {({ apple }) => (
         <Slicer slice={apple}>
           {({ sliced: slicedApple } => (
             <DinnerPlane contents={slicedApple} />
            )
           }
         </Slicer>
       )}
     </Apple>
   );

is more desirable than this:

  const apple = useApple();
  const slicedApple = useSlicer(apple);
  return <DinnerPlate contents={slicedApple} />;

Then go for it I guess.

Although you'd have to somehow ignore the fact that you'd end up with an even bigger mess if you want these intermediate functionality steps to interact with the parent component in a non-trivial way, ..

Needless to say, I have written such render-prop and "renderless" components in the past, and I see very little upside compared to hooks.