Reverting useSpring() with delays: How to make a spring act in reverse when receding?

Question

Consider the following example code with two independently animated dimensions with different delays (Sandbox here):

import React, { useState } from 'react'
import { useSpring, animated } from '@react-spring/web'

const from = { width: 100, height: 100, background: 'olive' }
const to = { width: 200, height: 200, background: 'olive' }
const delays = { width: 200, height: 1000 }

export default function App() {
  const [open, set] = useState(false)

  const props = useSpring({
    from,
    to: open ? to : from,
    delay: key => delays[key],
  })
  
  return (
    <animated.div style={props} onClick={() => set(!open)} />
  )
}

Currently, the delays get applied on the start of each transition (from -> to and to -> from), with makes the animation visually asymmetrical.

Instead I want to "reverse" the from -> to animation when animating to -> from (so the delays should 'happen in the end' - manifest as the animation ending early). Effectively it should look the same both ways, but backwards.

What is a/the correct way of doing this with react-spring?