Animate container first, child second, with CSSTransition

With CSSTransition, I would like to animate my container div first, then, with a delay, animate its child div.

I failed so far: they always animate at the same time, no matter the transition-delay set on the child.

See in my sandbox:

https://codesandbox.io/s/boring-pare-eb2qk?file=/src/App.js

Or check the extract below

      <CSSTransition
        in={toggled}
        timeout={200}
        classNames="container"
        unmountOnExit
      >
        <div className="container">
          Container and its border should appear first
          <CSSTransition
            in={toggled}
            timeout={200}
            classNames="child"
            unmountOnExit
          >
            <div className="child"> Child should appear second </div>
          </CSSTransition>
        </div>
      </CSSTransition>

.container-enter {
  opacity: 0;
}
.container-enter-active {
  opacity: 1;
  transition: opacity 1s;
}

.child-enter {
  opacity: 0;
}
.child-enter-active {
  opacity: 1;
  transition: opacity 2s 5s;
}

What am I doing wrong?

Thank you for your help.

I found the solution: I had to add the props "appear=true" and define associated styles...

for more details, here is my issue on the project's github: https://github.com/reactjs/react-transition-group/issues/790