Animate container first, child second, with CSSTransition

Question

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.