reactjs - Hur konverterar man ReactNode till en array?

Jag försöker skapa en komponent där vissa HTMLElements eller ReactComponents passerar till den på detta sätt:

<ContentList>
   <span>Hi</span> // Passed child No. 1
   <span>Hi2</span> // Passed child No. 2
   <CustomComponent prop1={}></CustomComponent> // Passed child No. 3
</ContentList>

Då kommer det att rendera de passerade barnen i denna struktur:

render() {
    let content: React.ReactNode = this.props.children;
    //----------------------
    //Desired Process goes here
    //----------------------
    return (
      <>
        <section className={styles.list}></section>
        <section className={styles.contentPanel}></section>
      </>
    );
}

Där den första sektionen ska vara en innehållsförteckning och den andra sektionen kommer att vara de renderade React-komponenterna och HTML-elementen. Min fråga är Hur ska jag arbeta med props.children (även kallat innehåll) som en array? Jag försökte söka efter det online men det finns ingen solid guide där ute. I princip vill jag göra något som detta:

let content: React.ReactNode = this.props.children;

// Creating relevant anchor for each content
let list = content.map((child, i) => {
  return (<a className="content-link" href={"#"+child.id}>{child.title}</a>)
});

// Rendering each content after wrapping them inside proper div
let contents = content.map((child, i) => {
  return (<div className="content">{child}</div>)
});

return (
  <>
    <section className={styles.list}>{list}</section>
    <section className={styles.contentPanel}>{contents}</section>
  </>
);

Svar #1

class App(){
  // Creating relevant anchor for each content
  function list(){
    return this.props.children.map((child, i) => {
      return (<a className="content-link" href={"#"+child.id}>{child.title} </a>)
    });
  }  

  // Rendering each content after wrapping them inside proper div
  function contents(){
    return this.props.children.map(...)
  }

  render() {
    return (
      <>
        <section className={styles.list}>{list()}</section>
        <section className={styles.contentPanel}>{contents()}</section>
      </>
    )
  }
}

Svar #2

Typescript-kompilatorn är superstrikt på variabeltyp vid deklaration och tilldelning, men jag lyckades få det att fungera genom följande process:

render() {
  let content: React.ReactNode = this.props.children;
  let list: Array<JSX.Element> = [], // #1
       contents: Array<JSX.Element> = []; // #1
  if (this.props.children !== undefined && this.props.children !== null) {
    if (Array.isArray(content)) { // #2
      let arr: Array<any> = content; // #3
      list = arr.map((child, i) => {
        return (
          <a
           className={styles.contentAnchor}
           href={"#content_" + child.props.id}
          >
            {child.props.title}
          </a>
        );
      });
      contents = arr.map((child, i) => {
        return (
          <div
            id={"content_" + child.props.id}
            className={styles.contentWrapper}
          >
            {child}
          </div>
        );
      });
    }
  }
  return (
    <>
      <section className={styles.list}>{list}</section>
      <section className={styles.contentPanel}>{contents}</section>
    </>
  );
}

De faktiska nyckel-raderna som saknades från början är de jag markerade med #