diff --git a/src/components/DisplayNames/DisplayNamesWithTooltip.js b/src/components/DisplayNames/DisplayNamesWithTooltip.js
index c8a3a3a1f37..0e8c435f445 100644
--- a/src/components/DisplayNames/DisplayNamesWithTooltip.js
+++ b/src/components/DisplayNames/DisplayNamesWithTooltip.js
@@ -1,6 +1,7 @@
-import React, {Fragment, useCallback, useEffect, useRef, useState} from 'react';
+import React, {Fragment, useCallback, useRef} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
+import lodashGet from 'lodash/get';
 import styles from '../../styles/styles';
 import Text from '../Text';
 import Tooltip from '../Tooltip';
@@ -10,13 +11,7 @@ import {defaultProps, propTypes} from './displayNamesPropTypes';
 function DisplayNamesWithToolTip(props) {
     const containerRef = useRef(null);
     const childRefs = useRef([]);
-    const [isEllipsisActive, setIsEllipsisActive] = useState(false);
-
-    useEffect(() => {
-        setIsEllipsisActive(
-            containerRef.current && containerRef.current.offsetWidth && containerRef.current.scrollWidth && containerRef.current.offsetWidth < containerRef.current.scrollWidth,
-        );
-    }, []);
+    const isEllipsisActive = lodashGet(containerRef.current, 'offsetWidth') < lodashGet(containerRef.current, 'scrollWidth');
 
     /**
      * We may need to shift the Tooltip horizontally as some of the inline text wraps well with ellipsis,