use useRef for nav and hr but nav doesn't work with react-strap

src/client/js/components/CustomNavigation.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import {
   Nav, NavItem, NavLink, TabContent, TabPane,
@@ -10,6 +10,8 @@ const CustomNavigation = (props) => {
   const [sliderWidth, setSliderWidth] = useState(100);
   const [sliderMarginLeft, setSliderMarginLeft] = useState(0);
   const refs = {};
+  const nav = useRef();
+  const hr = useRef();
 
   Object.keys(props.navTabMapping).forEach((key) => {
     refs[key] = React.createRef();
@@ -27,42 +29,50 @@ const CustomNavigation = (props) => {
     return min / max * 100;
   }
 
-  const navBar = document.getElementById('grw-custom-navbar');
-  const navTabs = document.querySelectorAll('ul.grw-custom-navbar > li.grw-custom-navtab');
+
+  // const navTabs = document.querySelectorAll('ul.grw-custom-navbar > li.grw-custom-navtab');
 
   useEffect(() => {
+
+    const navBar = document.getElementById('grw-custom-navbar');
+
     console.log(`useEffecet ${activeTab}`);
     console.log('reffff', refs);
+    // console.log(`ref.current = ${nav.current}`);
+    console.log('nav', nav);
+    console.log('hr', hr);
 
     if (activeTab === '') {
       return;
     }
 
-    if (navBar == null || navTabs == null) {
-      console.log(`${navBar},${navTabs}`);
-      setSliderWidth(5);
-      return;
-    }
+
+    // if (navBar == null || navTabs == null) {
+    //   console.log(`${navBar},${navTabs}`);
+    //   setSliderWidth(5);
+    //   return;
+    // }
+
 
     // const tempML = 0;
 
-    //   const styles = [].map.call(navTabs, (el) => {
-    //     const width = getPercentage(el.offsetWidth, navBar.offsetWidth);
-    //     const marginLeft = tempML;
-    //     tempML += width;
-    //     return { width, marginLeft };
-    //   });
-    //   const { width, marginLeft } = styles[props.navTabMapping[activeTab].index];
+    // const styles = [].map.call(navTabs, (el) => {
+    //   const width = getPercentage(el.offsetWidth, navBar.offsetWidth);
+    //   const marginLeft = tempML;
+    //   tempML += width;
+    //   return { width, marginLeft };
+    // });
+    // const { width, marginLeft } = styles[props.navTabMapping[activeTab].index];
 
-    //   setSliderWidth(width);
-    //   setSliderMarginLeft(marginLeft);
-    //   console.log(`sliderWidth = ${sliderWidth}`);
+    // setSliderWidth(width);
+    // setSliderMarginLeft(marginLeft);
+    // console.log(`sliderWidth = ${sliderWidth}`);
 
-  }, [activeTab]);
+  }, []);
 
   return (
     <React.Fragment>
-      <Nav className="nav-title grw-custom-navbar" id="grw-custom-navbar">
+      <Nav ref={nav} className="nav-title grw-custom-navbar" id="grw-custom-navbar">
         {Object.entries(props.navTabMapping).map(([key, value]) => {
           console.log(`key = ${key}, value = ${value.index}`);
           return (
@@ -81,7 +91,7 @@ const CustomNavigation = (props) => {
         })}
       </Nav>
       {/* {renderNavSlideHr()} */}
-      <hr className="my-0 grw-nav-slide-hr border-none" style={{ width: `${sliderWidth}%`, marginLeft: `${sliderMarginLeft}%` }} />
+      <hr ref={hr} className="my-0 grw-nav-slide-hr border-none" style={{ width: `${sliderWidth}%`, marginLeft: `${sliderMarginLeft}%` }} />
       {/* <hr className="my-0 grw-nav-slide-hr border-none" style={{ width: `${sliderWidth}%`, marginLeft: `${sliderMarginLeft}%` }} /> */}
       <TabContent activeTab={activeTab} className="p-4">
         {Object.entries(props.navTabMapping).map(([key, value]) => {