The problem that I'm stuck with some function that can get dimensions of some element. I'm working on project like Tabs and I want to 'border-bottom' the element that is active and make it nicely. So, I need to get width and left properties of each Tab. But Idk how to do it. Here is the my piece of code:

        const Tabs = ({renderTab, options, value}) => {   
        // option is the array that contains info about each Tab
        // value is a state  and need I to compare this value to change Tab etc
        
            const [sliderInfo, setSliderInfo] = useState({width: 0, left: 0});
        
            const currentTab = options.findIndex((tab) => tab.value === value );  
            
            const tabsRef = options.map(() => {
                return useRef(null);
            });
            
            useEffect(() => {
                // I tried to something like that, but it didnt work
                setSliderWidth({
                    width: tabsRef.current.getBoundingClientRect().width ,
                    left: tabsRef.current.getBoundingClientRect().left
                });
        
            }, [tabsRef]);
    
            return (
    
                <StyledTabsContainer>
                 {options.map((tab, i) => {  
                    return (
                        <div key={i}  className='wrapper'  ref={tabsRef[i]}  value={value} >
                            { renderTab(tab) }
                           
                        </div>            
                    )
                 })
                 }
                 <TabSlider width={sliderInfo.width} left={sliderInfo.left}></TabSlider>  
                
                </StyledTabsContainer>
        )
}

I will be very grateful if you can help me somehow!)