React how to access children from html in my component?

Question

I want to create a overlay-menu react component. I want to create a component that renders out a Menu-Open-Button.

The Menu is created serverside, so I need to pick the children to add them into my component. I tryed something like this, but this didnt work of course. What is the best practice for my problem?

<div id="menu-btn">
  <ul>
    <nav class="overlay-navigation">
      <ul>
        <li><a href="#">a</a></li>
        <li><a href="#">b</a></li>
        <li><a href="#">c</a></li>
      </ul>
    </nav>
  </ul>
</div>

render() {
        return (
            <>
            <a data-menuopen={ !this.state.open } onClick={ () => this.setState( { open: !this.state.open } ) } href="#" class="menu-btn">
                { !this.state.open ? <img class="svg" src="data/images/menu.svg" /> : "" }
                { this.state.open ? <img class="svg" src="data/images/close.svg" /> : "" }
            </a>

            <Portal>
                <div className="overlay-menu">
                    { this.props.children }
                </div>
            </Portal>
            </>
        );
    }