Swipe doesn't work on my react-tinder-card

[ivojovicc02]

Hi Jakob, I am watching tutorial from Ania Kubow. I have problem with swiping on my app, i asked ChatGPT,and it cannot solve my problem. Version that I have is "react-tinder-card": "^1.6.4". I can move my card a little bit, but she didn't swipe or go to their direction. I will put my dashboard code and my css code. If you can see any problem I will be thankful for helping me.

import TinderCard from 'react-tinder-card'
import { useEffect,useState } from 'react'
import {useCookies} from 'react-cookie'
import ChatContainer from '../components/ChatContainer'
import axios from 'axios'

const Dashboard = () => {
  const [user,setUser] = useState(null)
  const [genderedUsers,setGenderedUsers]=useState(null)
  const [cookies,setCookie,removeCookie] = useCookies(['user'])
  const [lastDirection, setLastDirection] = useState()

  const userId = cookies.UserId



  const getUser = async () =>{
    try{
        const response = await axios.get('http://localhost:8000/user',{
            params:{ userId }
        })
        setUser(response.data)
    }catch(error){
        console.log(error)
    }
  }

  const getGenderedUsers = async () =>{
    try{
        const response = await axios.get('http://localhost:8000/gendered-users',{
          params:{ gender: user?.gender_interest }
        })
        setGenderedUsers(response.data)
    }catch(error){
      console.log(error)
    }
  }






  useEffect(() => {
    getUser()
    getGenderedUsers()
  },[user,genderedUsers])

  console.log(genderedUsers)

  const updateMatches = async(matchedUserId) =>{
      try{
        await axios.put('http://localhost:8000/addmatch',{
          userId,
          matchedUserId
        })
        getUser()
      }catch(error){
        console.log('error')
      }

  }





      


const swiped = (direction, swipedUserId) => {
  if (direction === 'right'){
    updateMatches(swipedUserId)
  }
  setLastDirection(direction)
  }

const outOfFrame = (name) => {
console.log(name + ' left the screen!')
}
return(
<>
  {user &&
    <div className="dashboard">
        <ChatContainer user={user} />
        <div className="swipe-container">
            <div className="card-container">

            {genderedUsers?.map((genderedUser) =>
                <TinderCard
                 className='swipe' 
                 key={genderedUser.first_name} 
                 onSwipe={(dir) => swiped(dir, genderedUser.user_id)} 
                 onCardLeftScreen={() => outOfFrame(genderedUser.first_name)}>
                <div style={{ backgroundImage: 'url(' + genderedUser.url + ')' }} className='card'>
                <h3>{genderedUser.first_name}</h3>
                
                </div>
                </TinderCard>

            )}
            <div className='swipe-info'>
                {lastDirection ? <p>You swiped{lastDirection}</p>:<p/>}

            </div>

            </div>

        </div>

    </div>}
</>
)

}
export default Dashboard,

and my css code for dashboard
.dashboard {
display: flex;
justify-content: space-between;
}

.dashboard .swipe-container {
width: 70%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}

.swipe {
position: absolute;
}

.dashboard .card-container {
width: 400px;
height: 650px;
position: relative;
}

.card {
width: 400px;
height: 650px;
border-radius: 30px;
background-size: cover;
background-position: center;
}

.card h3 {
margin-top: 0;
}

.dashboard .swipe-info {
position: absolute;
bottom: 0;
padding: 10px;
}