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

[Anonymous]

Имеется такой код, при использовании 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 (


{options.map((option, index) => (
handleChangeOption(index)}
>
{option}

))}




)
}

export default Select;



Подробнее здесь: https://stackoverflow.com/questions/796 ... 1%80%d0%b2