Call order of the React life cycle componentWillUnmount

Question

I have some questions... why do we have such sequences of the componentWillUnmount? from parent to its children.

is it possible to reverse and bubble it? from children to their parent?

CodeSandbox

import React from "react";
import ReactDOM from "react-dom";

class Man extends React.PureComponent {
  componentWillUnmount = () => {
    console.log("Man");
  };

  render = () => "Man";
}
class Hello extends React.Component {
  componentWillUnmount = () => {
    console.log("Hello");
  };

  render() {
    return <p>Hello {this.props.children}</p>;
  }
}
class Root extends React.PureComponent {
  state = {
    visible: true
  };

  render = () => (
    <React.Fragment>
      <button
        onClick={() => this.setState(({ visible }) => ({ visible: !visible }))}
      >
        Click
      </button>

      {this.state.visible && (
        <Hello>
          <Man />
        </Hello>
      )}
    </React.Fragment>
  );
}
ReactDOM.render(<Root />, document.getElementById("container"));