Manual initial scroll with useScroll

[AliMejbar]

Hello everyone,
I'm trying to make a scroll selector in my app for weight and height that works like this :

Simulator.Screen.Recording.-.iPhone.13.Pro.-.2022-07-29.at.02.18.06.mp4

up until now it works like a charm , but there is a critical improvement it needs I have found no way of achieving : How to set a default scroll to each of the elements at load, for example I would want to set the default weight for 80kg (which is the "default" weight instead of 30 which corresponds to 0% scrolling) or if the user filled his weight and went to another part of the registration form and went back to edit it
Is there a way to scroll manually the elements with the useScroll hook , is this a react matter or a Framer Motion matter or both ?

here is my code :

const savedValueOrDefault = 80 //default value or what I'd pull from saved state
  const savedValueOrDefualt2 = 170 //default value or what I'd pull from saved state

  const [selectedWeight, setSelectedWeight] = useState<number>( savedValueOrDefault )
  const [selectedHeight, setSelectedHeight] = useState<number>( savedValueOrDefualt2 )

  const weightScrollRef = useRef( null )
  const heightScrollRef = useRef( null )
  const { scrollXProgress: weightScrollProgress } = useScroll( {
    container: weightScrollRef
  } )
  const { scrollXProgress: heightScrollProgress } = useScroll( {
    container: heightScrollRef
  } )

  const weightScale = useTransform( weightScrollProgress, value => Math.ceil( 30 + ( 300 - 30 ) * value ) )
  const heightScale = useTransform( heightScrollProgress, value => Math.ceil( 100 + ( 250 - 100 ) * value ) )

  weightScale.onChange( value => {
    setSelectedWeight( value )
  } )

  heightScale.onChange( value => {
    setSelectedHeight( value )
  } )

<>
            <div className="...styling">{selectedWeight}<span className="...styling">kg</span></div>
            <motion.div className="flex flex-row space-x-2 items-center mt-5 overflow-x-scroll overscroll-none snap-x snap-proximity pb-10 " ref={weightScrollRef}>
              <div className="...styling">
                <svg />
                </svg>
              </div>
              {Array.from( {
                length: 296
              }, ( _, i ) => i + 18 ).map( ( x, _ ) => {
                if ( x % 5 === 0 ) {
                  if ( x % 10 === 0 ) {
                    return (
                      <div key={x} className="h-8 w-[2px] rounded-full bg-gray-300 shrink-0 relative snap-center">
                        {Math.abs( x - selectedWeight ) > 3 && ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className={classNames( "text-gray-400 dark:text-gray-200 absolute top-12 left-1/2", x.toString().length <= 2 ? " -ml-[8px]" : "-ml-[12px]" )}>{x}</motion.div> )}
                      </div>
                    )
                  } else {
                    return <div key={x} className="h-8 w-[2px] rounded-full bg-gray-300 shrink-0 snap-center"></div>
                  }
                }
                else {
                  return <div key={x} className="h-4 w-[2px] rounded-full bg-gray-300 shrink-0 snap-center"></div>
                }
              } )}
            </motion.div>
</>