Cubic-bezier fixes exiting animation but breaks entering animation

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:

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 ''