feat(left-sidebar-icon-button): wrap with link component

src/components/General/LeftSidebar/LeftSidebarIconButton.tsx

@@ -1,7 +1,7 @@
 import { IconButton } from '@status-im/components'
 import { useDispatch } from 'react-redux'
 import { Stack } from 'tamagui'
-import { useNavigate } from 'react-router'
+import { Link } from 'react-router-dom'
 
 import { toggleButtonSelection } from '../../../redux/LeftSidebar/slice'
 
@@ -23,37 +23,36 @@ const LeftSidebarIconButton = ({
   path,
 }: IconButtonWithDotProps) => {
   const dispatch = useDispatch()
-  const navigate = useNavigate()
 
   const onClickHandler = () => {
     isDisabled ? null : dispatch(toggleButtonSelection(id))
-    navigate(path)
   }
 
   return (
-    <Stack style={{ position: 'relative', display: 'inline-block' }}>
+    <Link to={path} onClick={onClickHandler}>
-      <IconButton
+      <Stack style={{ position: 'relative', display: 'inline-block' }}>
-        icon={iconEl}
+        <IconButton
-        variant={isDisabled ? 'outline' : 'ghost'}
+          icon={iconEl}
-        selected={isSelected}
+          variant={isDisabled ? 'outline' : 'ghost'}
-        disabled={isDisabled}
+          selected={isSelected}
-        onPress={onClickHandler}
+          disabled={isDisabled}
-      />
-      {isDotOn && (
-        <Stack
-          style={{
-            position: 'absolute',
-            right: 7,
-            top: 5,
-            width: '9px',
-            height: '9px',
-            borderRadius: '50%',
-            backgroundColor: '#1992D7',
-            border: '1.5px solid #fff',
-          }}
         />
-      )}
+        {isDotOn && (
-    </Stack>
+          <Stack
+            style={{
+              position: 'absolute',
+              right: 7,
+              top: 5,
+              width: '9px',
+              height: '9px',
+              borderRadius: '50%',
+              backgroundColor: '#1992D7',
+              border: '1.5px solid #fff',
+            }}
+          />
+        )}
+      </Stack>
+    </Link>
   )
 }