Shared:Components:Tabs: fix scroll to selected tab after for first render

packages/shared/components/tabs/Tabs.tsx

@@ -24,7 +24,7 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, useCallback } from "react";
 import { useTheme } from "styled-components";
 
 import { Scrollbar as ScrollbarType } from "../scrollbar/custom-scrollbar";
@@ -69,11 +69,8 @@ const Tabs = (props: TabsProps) => {
   const isViewFirstTab = useViewTab(scrollRef, tabsRef, 0);
   const isViewLastTab = useViewTab(scrollRef, tabsRef, items.length - 1);
 
-  useEffect(() => {
-    setCurrentItem(items[selectedItemIndex]);
-  }, [selectedItemIndex, items]);
-
-  const scrollToTab = (index: number): void => {
+  const scrollToTab = useCallback(
+    (index: number): void => {
       if (!scrollRef.current || !tabsRef.current) return;
 
       const containerElement = scrollRef.current.scrollerElement;
@@ -118,7 +115,14 @@ const Tabs = (props: TabsProps) => {
             OFFSET_RIGHT,
         );
       }
-  };
+    },
+    [theme.interfaceDirection],
+  );
+
+  useEffect(() => {
+    setCurrentItem(items[selectedItemIndex]);
+    scrollToTab(selectedItemIndex);
+  }, [selectedItemIndex, items, scrollToTab]);
 
   const setSelectedItem = (selectedTabItem: TTabItem, index: number): void => {
     setCurrentItem(selectedTabItem);