ScrollWidth return ClientWidth instead the currect value - reactjs

Question

I'm building a slider with React and framer motion. My idea is to subtract scrollWidth with offsetWidth to get the remaining width of the element.
I always get the value of zero (somehow they are equal). I printed the object and I saw that scrollWidth value returns clientWidth instead.
In the object the value of scrollWidth is totaly different and I cant tell why.

Answer 1

I am Creating This Same Project Carousel Slider In Next.js
But I got scrollWidth is Undefined
I dont Know What Happend But..
I got scrollWidth is undefined
enter image description here
import React, { useEffect, useRef, useState } from 'react'
import { motion } from 'framer-motion';
import cardsUser from '../pages/CardsUsers'
const CardCaousel = () => {
const [width,setWidth] = useState(0)
const carousel = useRef()
useEffect(()=>{
setWidth(carousel.current.scrollWidth - carousel.current.offsetWidth)
},[])
return (
<div className="container max-w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-5 bggradient">
<div className="liveactionscontainer mt-20">
<h1 className='text-center text-white font-extralight text-6xl mt-2 mb-3'>Live Actions </h1>
<p className='font-extralight text-gray-500 text-center'>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis, suscipit repellat
<br/>
inventore dolor quia quos molestias quae vitae? Eveniet nobis, laborum voluptas culpa libero similique.</p>
<div className="myflex flex justify-center" data-aos="fade-right">
<motion.div className="carousel">
<motion.div
drag="X"
dragConstraints={{right:0,left:-width}}
className="inner-carousel"
>
{cardsUser.map((e)=>{
return (
<motion.div className='item' key={e}>
<div className="mycolumn mb-10">
<div class="nft">
<div class='main'>
<img class='tokenImage' src={e.Imgsrc} alt="NFT" />
<h2>{e.name}</h2>
<p class='description'>Lorem, ipsum dolor sit amet consectetur adipisicing elit. </p>
<div class='tokenInfo'>
<div class="price">
<ins>◘</ins>
<p>0.031 ETH</p>
</div>
<div class="duration">
<button>Place bid</button>
</div>
</div>
<hr />
<div class='creator'>
<div class='wrapper'>
<img src={e.profileImg} alt="Creator" />
</div>
<p><ins>Creation of</ins><span className='text-white'> NF</span> </p>
</div>
</div>
</div>
</div>
</motion.div>
);})}
</motion.div>
</motion.div>
</div>
</div>
</div>
)
}
export default CardCaousel