How to compose a react parent component where the children are placed at different locations

So I want to implement a component that is used like this:

<Parent>
  <Child1 childName="Billy" />
  <Child2 childName="Bob" />
</Parent>

The implementation of the Parent component should be something like this:

const Parent = (props: {
    Child1: React.ReactNode;
    Child2: React.ReactNode;
  }) => {
    return (
      <>
        <div>This is Title</div>
        {props.Child1}

        <div>This is another component</div>
        {props.Child2}
      </>
    );
  };

The problem here is, this doesn't work in react as it would in .Net Blazor or any other framework that supports it.

I understand the following:

• I can use the children props in react but this would only allow me to render all the children at the same location which I am trying to avoid.
• I can just go ahead and assign the various child components as property values in the form of <Parent child1={<SomeChild/>} />. But I feel this goes against the aesthetics of my code base.

Summing it all up, I just want an alternative way to implement this instead of using the prop-value assignment or using the children props.

Thanks in advance!

You are passing both components as children prop. You can access them like props.children

  const Parent = ({children}: {
    children: ReactNode
  }) => {
    return (
      <>
        <div>This is Title</div>
        {children[0]}

        <div>This is another component</div>
        {children[1]}
      </>
    );
  };

Also there is an object called Children that you can import from react, that has some methods to work with children
https://www.smashingmagazine.com/2021/08/react-children-iteration-methods/