How to use Framer Motions's when to control transition animation start

I am trying to set display:none on a parent element once the children stagger animations have completed. My li elements fade out and the parent ul should then update to display:none

I can set a delay in the transition, but trying to tap into the when property. I have tried:

const variants = {
  open: {
      display: 'block',
      transition: {
          staggerChildren: 0.17,
          delayChildren: 0.2,
      }
  },
  closed: {
      display: 'none',
      transition: {
          staggerChildren: 0.05,
          staggerDirection: -1,
          display: {
            when: "afterChildren" // delay: 1 - this will work
          }
      }
  }
};

Clearly I am getting the syntax incorrect or cannot be used as I intend.

Sandbox Demo

import * as React from "react";
import { render } from "react-dom";
import {motion, useCycle} from 'framer-motion';

const ulVariants = {
  open: {
      display: 'block',
      visibility: 'visible',
      transition: {
          staggerChildren: 0.17,
          delayChildren: 0.2,
      }
  },
  closed: {
      display: 'none',
      transition: {
          staggerChildren: 0.05,
          staggerDirection: -1,
          display: {
            when: "afterChildren" // delay: 1 - will work
          }
      }
  }
};

const liVariants = {
  open: {
    y: 0,
    opacity: 1,
    transition: {
        y: {stiffness: 1000, velocity: -100}
    }
  },
  closed: {
      y: 50,
      opacity: 0,
      transition: {
          y: {stiffness: 1000}
      }
  }
}

const Item = (props) => (
  <motion.li
    variants={liVariants}
  >
    {props.name}
  </motion.li>
)

const App = () => {
  const [isOpen, toggleOpen] = useCycle(false, true);
  return (
    <>
      <button onClick={toggleOpen}>Toggle Animation</button>
      <motion.ul
        variants={ulVariants}
        animate={isOpen ? 'open': 'closed'}
      >
          {Array.from(['vader', 'maul', 'ren']).map((item, index) => (
            <Item key={item} {...{name: item}} />
          ))}
      </motion.ul>
    </>
  );
};

render(<App />, document.getElementById("root"));

when should be a property of the transition object, not display.

This seems to work (unless I'm misunderstanding what you're trying to do):

closed: {
  display: 'none',
  transition: {
      staggerChildren: 0.05,
      staggerDirection: -1,
      when: "afterChildren"
  }
}

Code Sandbox