How to get specific nested child component from parent component slot in render function?

I am conditionally rendering a child component using render function. Here is an example of the parent component with the child component:

<Parent :index="1">
  <Child> ... </Child>
  <Child> ... </Child>
  <Child> ... </Child>
</Parent>

in the render function of Parent component, I have the following code to conditionally render the child component like this:

return () => {
  const content = slots.default?.();
  const children = content?.filter(child => child.type === Child);
  const childToRender = children?.[props.index] ?? h('div')
  return h('div', {}, () => [childToRender]);
}

the code is working as expected.

However, I would like to wrap one of the child component with another component. For example like this:

<Parent :index="1">
  <Child> ... </Child>
  <ChildWrapper> ... </ChildWrapper>
  <Child > ... </Child>
</Parent>

where ChildWrapper.vue looks like this:

<template>
  <Child> <slot/> </Child>
</template>

which evidently the filter function (content?.filter(child => child.type === Child)) will not pick up the Child component in the ChildWrapper component.

If I inspect the ChildWrapper VNode’s children property, it shows an object (with the default slot function) instead of an array with Child component which I expected. So my question is how do I get hold of the nested Child component?