Почему при последующих рендерах ширина правильная у второго элемента, а при первом нет? (ReactJS, useLayout, useRef) [closed]

Имеется такой код, при использовании useLayoutEffect, он должен подсчитать мне ширину каждого option, и при нажатии добавить ширину предшествующих элементов, чтобы выбрать текущий option, но при добавлении первых рендеров значение 2-го элемента 114, хотя должно быть 123, как это можно исправить?

import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";

type SelectProps = {
    options: string[]
}

const Select = ({
    options
}: SelectProps) => {
    const [currentOption, setCurrentOption] = useState(0);
    const ref = useRef(null);
    const [x, setX] = useState(0);
    const [widthElements, setWidthElements] = useState([0])
    const currentWidth = widthElements[currentOption + 1]
    
    const handleChangeOption = (index: number) => {
        setCurrentOption((prev) => prev = index)
        setX(widthElements.slice(0, index + 1).reduce((acc, el) => acc + el))
    }

    useLayoutEffect(() => {

        if (ref?.current?.children) {
            const widths = [...ref?.current?.children].map((value: HTMLElement) => value.offsetWidth)
            setWidthElements([0, ...widths])
        }
        console.log(widthElements)
        
    }, [currentWidth])
    
    
    return (
        <div className="relative bg-black-20 max-w-80 md:max-w-[368px] h-14 p-2 rounded-[0.5rem]">
            <div ref={ref} className="absolute flex z-1">
                {options.map((option, index) => (
                    <div
                        key={index + option}
                        className={`relative ${currentOption === index ? 'text-primary-50' : 'text-gray-300'} 
                        px-8 py-2 rounded-[0.5rem] link-regular text-xs md:text-base transition-all duration-200 ease-in-out
                        
                        `}
                        onClick={() => handleChangeOption(index)}
                    >
                        {option}
                    </div>
                ))}
            </div>
            <div className="relative w-full h-full overflow-hidden ">
               <div
                    style={{
                        width: currentWidth + 'px',
                        transform: `translateX(${x}px)`
                    }}
                    className={`absolute top-0 left-0 h-10 bg-primary-300 text-primary-50 rounded-[0.5rem]
                transition-all ease-in-out duration-200
            `} />

            </div>

        </div>)
}

export default Select;