I'm trying to animate a collapsing list with React/Joy-UI
Here is my Transition element
     <Transition nodeRef={nodeRef} in={browseOpen} timeout={1000}>
      {(state: string) => (<List
        aria-labelledby="nav-list-browse"
        sx={{
          '& .JoyListItemButton-root': { p: '8px' },
          transition: '1000ms',
          transitionProperty: 'max-height',
          overflow: 'hidden',
          ...{
            exiting: { maxHeight: '0px'},
            exited: { maxHeight: '0px'},
            entering: { maxHeight: '500px'},
            entered: { maxHeight: '500px'},
          }[state],
        }}
      >

With this the list expands fine, but there appears to be a delay on collapsing.
I then added "cubic-bezier(0, 1, 0, 1)" to the "transition" property, which fixes the collapsing animation, but the expand animation then seems to break entirely.
How can I get both the entering and exiting working?
Before adding cubic bezier (sorry for the loss-y gifs):

After adding cubic bezier:


Cubic-bezier fixes exiting animation but breaks entering animation
Found the answer:
The transition needed to be set like this:
transition: `1000ms ${state === "exiting" ? "cubic-bezier(0, 1, 0, 1)" : "ease-out"}`

For any other novices out there, note the backticks `` around the string rather than ''
