how to find error useTransition in react-spring?

I am a starter in react-spring and I am writing this:

import { useState } from "react";
import {animated, useTransition} from "react-spring";

const slides = [
    {
        id: 0,
        url: "./register/1.jpg"
    },
    {
        id: 1,
        url: "./register/2.jpg"
    }

];

function Home(){

    const [ind, set] = useState(0);
    
    const tr = useTransition( slides[ind], item => item.id, {
        from: {opacity: 0 },
        enter: {opacity: 1},
        leave: {opacity: 0}
    } );

    return (
        <div className="register" >
            <div className="pictures" onClick= {()=>set( (ind+1)%2 )}>
                {
                    tr.map( ( {index , props, key} )=> 
                    <animated.img style={props} key = {key} src = {index.url}  /> )
                }
            </div>
            <div className="form"></div>
        </div>
    );
}

export default Home;

But I get this error:

TypeError: Cannot read property 'url' of undefined
(anonymous function)
C:/Users/Feruz-PC/Desktop/upwork/QuizApp/frontend/src/Components/Home.js:32

I can't fix it. In this example, I use react-spring@8.0.5.

You should change the index property of the transition map to item. Something like this:

tr.map( ( {item , props, key} )=> 
 <animated.img style={props} key = {key} src = {item.url}  />)