React Spring doesn't work/load on components?

Question

I have the following component named as test.js with the component:

import React, { useRef, useState, useEffect, useCallback } from 'react'
import { render } from 'react-dom'
import { useTransition, animated } from 'react-spring'
import './styles.css'

function App() {
  const ref = useRef([])
  const [items, set] = useState([])
  const transitions = useTransition(items, null, {
    from: { opacity: 0, height: 0, innerHeight: 0, transform: 'perspective(600px) rotateX(0deg)', color: '#8fa5b6' },
    enter: [
      { opacity: 1, height: 80, innerHeight: 80 },
      { transform: 'perspective(600px) rotateX(180deg)', color: '#28d79f' },
      { transform: 'perspective(600px) rotateX(0deg)' },
    ],
    leave: [{ color: '#c23369' }, { innerHeight: 0 }, { opacity: 0, height: 0 }],
    update: { color: '#28b4d7' },
  })

  const reset = useCallback(() => {
    ref.current.map(clearTimeout)
    ref.current = []
    set([])
    ref.current.push(setTimeout(() => set(['Apples', 'Oranges', 'Kiwis']), 2000))
    ref.current.push(setTimeout(() => set(['Apples', 'Kiwis']), 5000))
    ref.current.push(setTimeout(() => set(['Apples', 'Bananas', 'Kiwis']), 8000))
  }, [])

  useEffect(() => void reset(), [])

  return (
    <div>
      {transitions.map(({ item, props: { innerHeight, ...rest }, key }) => (
        <animated.div className="transitions-item" key={key} style={rest} onClick={reset}>
          <animated.div style={{ overflow: 'hidden', height: innerHeight }}>{item}</animated.div>
        </animated.div>
      ))}
    </div>
  )
}

export default App;

I used this from the react-spring's example page to test out some animations but when i load this component from the App.js as below:

import React from 'react';
import './index.css';
import Home from './components/dashboard/home';
import Test from './components/auth/test';
import { Route, Switch } from 'react-router-dom';
import Navbar from './components/layout/navbar'

function App() {
  return (
    <>
      <Navbar />
      <Switch>
        <Route to='/' component={Home} />
        <Route to='/test' component={Test} />
      </Switch>
    </>
  );
}

export default App;

the animation / text doesn't appear but it is there in the DOM when I open the console.

Please help, im trying to get this animations working - sandbox link

Answer 1

I tried to recreate your problem. I experienced the same if I use React.StrictMode. So I have to remove it.

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

After remove scrict mode.

ReactDOM.render(
    <App />,
  rootElement
);

Your problem may be different, but it is interesting that it is in the dom but nothing shows just as you described.

https://codesandbox.io/s/sweet-babbage-ojqho?file=/src/App.js