How is props.children added inside opening and closing tags in React JS with children="xyz" attribute?

This is how I understand props.children in React:

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

class ThemedButton extends React.Component {
  render() {
    console.log(this.props);
    return ( <
      button > {
        this.props.children
      }
      " 12345" <
      /button>
    );
  }
}

function Toolbar(props) {
  return ( <
    ThemedButton onClick = {
      props.changeTheme
    } >
    Change Theme <
    /ThemedButton>
  );
}



ReactDOM.render( < Toolbar / > , document.getElementById('root'));
//this will generate <button>Change Theme 12345</button>

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id="root"></div>

<!-- end snippet -->

So basically any child node(s) of ThemedButton will be put in place of props.children. This makes sense, but what doesn't make sense is if I omit props.children and instead just pass {...props} as attribute or use children attribute as property on the button tag, it still inserts the child node(s). Following is the example:

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

class ThemedButton extends React.Component {
  render() {
    console.log(this.props);
    return ( 
    <button {...this.props}  ></button>  //child nodes are added automatically     
    );
  }
}

class ThemedButton2 extends React.Component {
  render() {
    console.log(this.props);
    return ( 
    <button children="XYZ"  ></button>
    );
  }
}


function Toolbar(props) {
  return ( 
  <React.Fragment>
    <
    ThemedButton onClick = {
      props.changeTheme
    } >
    Change Theme <
    /ThemedButton>
    <ThemedButton2> Change theme2 </ThemedButton2>
  </React.Fragment>
  );
}



ReactDOM.render( < Toolbar / > , document.getElementById('root'));

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

<!-- end snippet -->

As you can see {...props} on button seemingly brings actual child nodes of ThemedButton> as children property. In ThemedButton2 I manually provided children="xyz", which automatically inserts xyz as child nodes of button.

Why is this happening? Where does react explain this in it's official documentation?

If you look at type definitions it should be quite clear:
<button> is of type

React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;

React.DetailedHTMLProps is defined as:

type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = ClassAttributes<T> & E;

so it extends HTMLAttributes, which is defined as:

    interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
...
}

and extends DOMAttributes, which is defined (finally) as:

interface DOMAttributes<T> {
            children?: ReactNode | undefined;
            dangerouslySetInnerHTML?: {
                __html: string;
            } | undefined;
    
            // Clipboard Events
            onCopy?: ClipboardEventHandler<T> | undefined;
            onCopyCapture?: ClipboardEventHandler<T> | undefined;
            onCut?: ClipboardEventHandler<T> | undefined;
            onCutCapture?: ClipboardEventHandler<T> | undefined;
            onPaste?: ClipboardEventHandler<T> | undefined;
            onPasteCapture?: ClipboardEventHandler<T> | undefined;
...
}

So, in the end, children is actually a valid prop of button, and if you overwrite it by stating:

<button children="TEST" />

It will actually render that children property.
In React docs they talk about this here: https://react.dev/reference/react-dom/components/common saying that:

> All built-in browser components, such as <div />, support some common props and events.

and those props are to be found here: https://react.dev/reference/react-dom/components/common#common-props

and children is one of them:

> children: A React node (an element, a string, a number, a portal, an empty node like null, undefined and booleans, or an array of other React nodes). Specifies the content inside the component. When you use JSX, you will usually specify the children prop implicitly by nesting tags like <div><span /></div>.