обновить значение, используя useRef и useEffect

Question

Мне нужно получить левую позицию элемента после того, как элементы были смонтированы, чтобы показать индикатор выполнения. Он работает при нажатии на ссылки, однако, когда он был смонтирован, progressWidth не рассчитывается. в основном, useEffect кажется работающим до монтирования компонента !!!!

    export default ({ task, selectedLocal, selectedScenarioId, taskId, selectedTaskId }: ITaskNavItem) => {
    const isActiveNav = (match: any, location: object) => match;
    const isBefore = taskId <= selectedTaskId;
    const isActive = taskId === selectedTaskId;
    const navItemWidth = 100;
    const [progressWidth, setProgressWidth] = useState(0);
    const ref = useRef<HTMLInputElement>(null);

    useEffect(() => {
        if (ref.current) {
            console.log(ref.current.getBoundingClientRect().left);
            setProgressWidth(ref.current.getBoundingClientRect().left);
        }
    });


    const theme = getTheme();
    const styles = StyleSheet.create({
        navLink: {
            display: 'flex',
            fontSize: '12px',
            textDecoration: 'none',
            color: theme.palette.neutralPrimary
        },
        navLinkActive: {
            color: theme.palette.neutralPrimary,
            fontWeight: 'bold'
        },
        navTitle: {
            width: `${navItemWidth}px`,
            textAlign: 'center',
            wordBreak: 'break-word',
            wordSpacing: `${navItemWidth}px`
        },
        linkText: {
            display: 'flex',
            flexFlow: 'column',
            'align-items': 'center'
        },
        navIndicator: {
            borderRadius: '50%',
            margin: '10px 0 0 0',
            backgroundColor: theme.palette.white,
            width: '30px',
            height: '30px',
            border: '2px solid',
            borderColor: theme.palette.neutralPrimary,
            position: 'relative',
            'z-index': '3'
        },
        innerIndicator: {
            position: 'absolute',
            borderRadius: '50%',
            width: '20px',
            height: '20px',
            backgroundColor: theme.palette.neutralPrimary,
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)'
        },
        activeNavIndicator: { borderColor: theme.palette.themePrimary },
        activeInnerIndicator: { backgroundColor: theme.palette.themePrimary },
        progress: {
            marginTop: '59px',
            'z-index': '2',
            position: 'fixed',
            left: '0',
            width: `${progressWidth}px`,
            borderBottom: '2px solid',
            borderColor: theme.palette.themePrimary
        }
    });

    return (
        <div className={css(styles.navLink)}>
            <NavLink
                exact
                isActive={isActiveNav}
                className={css(isActive ? [styles.navLink, styles.navLinkActive] : styles.navLink)}
                to={`/selectedLocal/${selectedLocal}/scenarios/${selectedScenarioId}/tasks/${taskId}`}
            >
                <div className={css(styles.linkText)}>
                    <div className={css(styles.navTitle)}> {task.title}</div>
                    <div
                        ref={ref}
                        className={css(
                            isBefore ? [styles.navIndicator, styles.activeNavIndicator] : styles.navIndicator
                        )}
                    >
                        <div
                            className={css(
                                isBefore ? [styles.innerIndicator, styles.activeInnerIndicator] : styles.innerIndicator
                            )}
                        />
                    </div>
                </div>
            </NavLink>
            {isActive && <div className={css(styles.progress)} />}
        </div>
    );
};

Поэтому, когда компонент загружается, я получаю изображение 1, когда я нажимаю на компонент, я получаю изображение 2. Что мне нужно, это когда загружаемый компонент загружается, это должно выглядеть как изображение 2.