Next.js react-spring- useTransition doesn't work

Question

I'm new to using react-spring. I am trying to add it to my nextjs website project but its not working. This is my code for using the custiom hooks from react-spring official website. This is the code ;

import React, { useState, useEffect } from 'react'
import { useTransition, animated, config } from 'react-spring'
import bg from '../../public/bg-1.jpg'
import cup from '../../public/cup.jpg'
import kent from '../../public/kents-board.jpg'
import board from '../../public/board.jpg'
import HeadText from '../StyledComponents/HeadText'
import Texts from '../StyledComponents/Texts'
import Wrapper from '../StyledComponents/Wrapper'
import styled from 'styled-components'
const slides = [
  {id: 0, url: bg},
  {id: 1, url: cup},
  {id: 2, url: kent},
  {id: 3, url: board},
]
const HomeSliderWrapper = styled(animated.div)`
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  will-change: opacity;
`
const HomeSlider = () => {
  const [index, set] = useState(0)
  const item = slides[index]
  const increment = () => set(state => (state + 1) % slides.length)
  useEffect( () => setInterval(increment, 8000) , [] )
  const transitions = useTransition( slides[index], item => item.id, {
    from: { opacity: 0 , transform: 'scale(1.1)'},
    enter: { opacity: 1 , transform: 'scale(1)'},
    leave: { opacity: 0 , transform: 'scale(0.9)' }
  })
  return transitions.map(({ item, props, key}) =>{
    console.log(item.url, key)
    return (
      <HomeSliderWrapper
        key={item.id}
        clas="bg"
        style={{
          backgroundImage: `url(${item.url})` , ...props
        }} />
    )
  })
}
export default HomeSlider 

The error I receive :

Unhandled Runtime Error
TypeError: Cannot read property 'url' of undefined
Call Stack
<unknown>
file:///C:/Users/Lenovo/text-app/.next/static/webpack/pages/index.2cd1de609c22fe5d5c86.hot-update.js (108:22)
Array.map
<anonymous>
HomeSlider
/_next/static/webpack/pages/index.2cd1de609c22fe5d5c86.hot-update.js (104:22)

Please I'm open to all suggestions. Thanks You