React Lazy Load useEffect

У меня проблема с получением clientWidth из useEffect.

Есть lazyLoad который загружает страничку с пользователями.

import { Suspense, lazy } from 'react';

const UsersContainer = lazy(() => import('./users/users-container'));

const Index = (props) => {
    return (
        <Suspense fallback={<div id={'loading'}/>}>
            <UsersContainer/>
        </Suspense>
    )
}

export default Index;

В UsersContainer есть дочерняя компонента dataTooltip, которая отображает полное имя User если оно не влазит в блок.

import React, { useEffect, useRef } from 'react';

import '../common.scss';

const DataTooltip = ({title, ...props}) => {
    let ref = useRef();

    useEffect(() => {
        if (ref.current.scrollWidth > ref.current.clientWidth) {
            ref.current.setAttribute('data-tooltip', title)
        }
    });

    return (
        <div ref={ref} className={'tooltip'}>
            {
                React.cloneElement(props.children, {ref: ref})
            }
        </div>
    )
}

export default DataTooltip;

В чем же проблема?

После того как UsersContainer загрузился и отрисовался в DOM, у него 'display: none' и в этот же момент асинхронно срабатывает useEffect в DataTooltip.

В итоге DataTooltip говорит что clientWidth = 0, из-за того что у родителя 'display: none'.

Как сделать так что бы useEffect срабатывал после того как lazyLoad убрал 'display: none'.

PS: useLayoutEffect работает так же, clientWidth = 0

Решил проблему так:

<Suspense fallback={<div id={'loading'}/>}>
   <Main/>
   <Acquaintance/>
   <UsersContainer/>
   <RegisterContainer/>
</Suspense>

должно быть

<Suspense fallback={<div id={'loading'}/>}>
    <Main/>
</Suspense> 
            
<Suspense fallback={<div id={'loading'}/>}>
    <Acquaintance/> 
</Suspense>
            
<Suspense fallback={<div id={'loading'}/>}>
    <UsersContainer/>
</Suspense>
            
<Suspense fallback={<div id={'loading'}/>}>
    <RegisterContainer/>
</Suspense>