[Solved]-In React a div has an height of a zero, then why its children are still showing on the screen-Reactjs

#one {
  height: 200px;
  background-color: green;
}

#two {
  height: 100px;
  background-color: yellow;
  position: absolute;
  z-index: 1;
  transition: all 1.5s ease-in-out;
  overflow: hidden;
}

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

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

<div id="container"></div>

<script type="text/babel">
  const hide = () => { var elem = document.getelementbyid("two"); elem.style.height = "0px"; }; reactdom.render(
  <div id="one">
    <h1>this is div one</h1>
    <div id="two">
      <h1>why this h1 is not hidden after the click</h1>
      <button onclick={hide} id="hide">click me</button>
    </div>
    <div id="three">
      <h1>this is div three</h1>
    </div>
  </div>, document.getelementbyid('container') )
</script>