I am trying to access the userId of a user from the url (url looks something like this http://localhost:3000/user-profile/904900003354517617608).

when i console out the userId it shows undefined.

I have used useParams in some other components too and they work properly but for useProfile it is having some problem (also i am using sanity).

the code:

const UserProfile = () => {
    const [user, setUser] = useState(null)
    const [pins, setPins] = useState(null)
    const [text, setText] = useState('Created')
    const [activebutton, setActivebutton] = useState('created')

    const navigate = useNavigate()
    const { userId } = useParams()
    console.log(userId)


    useEffect(() => {
        const query = userQuery(userId)

        client.fetch(query)
            .then((data) => {
                setUser(data[0])
            })
    }, [userId]) 

    return (
        <div className="relative pb-2 h-full justify-center items-center">
            <div className="flex flex-col pb-5">
                <div className="relative flex flex-col mb-7">
                    <div className="flex flex-col justify-center items-center">
                        <img 
                            src={randomImage} 
                            className="w-full h-370 2xl:h-510 shadow-lg object-cover"
                            alt="Banner"
                        /> 

                        <img 
                            className="rounded-full w-20 h-20 -mt-10 shadow-xl object-cover"
                            src={user.image}
                            alt="Profile-picture"
                        />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default UserProfile