React-spring useTransition behaves wrongly

I have a Preact/Nextjs app when a thumbnail is clicked a fixed element slides on top. React-spring is used for animating the slide-up. The first time the transition works smoothly. The second time there is a small delay and the top component is visible without transition. It is even misplaced from the top, that it normally is not.

The transition works without problems in React.

The Relevant code is:

import { useTransition } from 'react-spring'

const projectDetailVisibility = useMappedState(mapState)

const transitions = useTransition(projectDetailVisibility, null, {
	from: { display: 'none', transform: 'translate3d(0, 100vh, 0)' },
	enter: { display: 'initial', transform: 'translate3d(0, 0vh, 0)' },
	leave: { display: 'none', transform: 'translate3d(0, 0vh, 0)' }
})

return (
	<Main>
		{transitions.map(({ item, key, props }) => item && <IndexDetail key={key} styleProps={props} />)}
		<IndexList title={title} filterCategory={filterCategory} match={match} />
	</Main>
)

Does Anybody have experience with using useTransition from react-spring with Preact? Does this problem come from “Next-level conditional rendering”? Does Preact has different mount/unmount behaviour than React, that can cause this?

Versions: next": “^9.0.3-canary.2” “preact”: “^10.0.0-rc.0” “react-spring”: “^9.0.0-beta.9” (I have tried stable 8 versions without change in behaviour)

[JoviDeCroock]

Hey, if it’s not too much trouble could you give a reproducible example. The causes I can think of from the top of my head are quite wide and I have no experience with react-spring.

[secretlifeof]

Thank you also for your answer! Can I contribute some how? Is there a possibility to set the options within my nextjs/preact app?