SubNavigationItems (Shopify/Polaris) reload the page onClick

Question

How can i prevent reloading page when clicking on the one of SubNavigationItems?

As i'm using shopify/polaris I came across such an issue, when I click on the subNavaigtionItem, the page reloads. This does not happen when I simply switch between simple items.

Code:

import { Navigation } from '@shopify/polaris';
import './SettingsNavbar.scss';
import React, { useCallback, useEffect, useState } from 'react';
import './SettingsNavbar.scss';
import {
  CreditCardMajor,
  CashDollarMajor,
  ToolsMajor,
  LogoBlockMajor,
  DiscountsMajor,
  CartMajor,
  CodeMajor,
  AffiliateMajor,
} from '@shopify/polaris-icons';
import { useLocation, useNavigate } from 'react-router-dom';
const tabs  = ["general",'subscription','dynamic-pricing', "building-blocks", "shopify-discount-codes", 'checkout-options',"assets", "integrations"];

export const SettingsNavbar: React.FC = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const [activeSettingsPage, setActiveSettingsPage] = useState('');
  const handleNavItemClick = useCallback(
    (tabTitle: string, path?: string) => {
      if (path) {
        navigate(path);
      }
    },
    [navigate]
  );
  useEffect(()=>{
    const active = tabs.find((el)=>location.pathname.includes(el))
    setActiveSettingsPage(active || '')
  },[location.pathname])

  return (
    <div className='SettingsNavBar'>
      <Navigation location={location.pathname}>
        <Navigation.Section
          items={[
            {
              onClick: () => handleNavItemClick('general', 'general'),
              selected: activeSettingsPage === 'general',
              label: 'General settings',
              icon: ToolsMajor,
            },
            {
              url:location.pathname,
              onClick: () => handleNavItemClick('building-blocks', 'building-blocks/sticky-bar'),
              selected: activeSettingsPage === 'building-blocks',
              label: 'Building blocks',
              icon: LogoBlockMajor,
              subNavigationItems: [
                {
                  url: '/settings/building-blocks/sticky-bar',
                  disabled: false,
                  label: 'Sticky bar',
                },
                {
                  url: '/settings/building-blocks/notification',
                  disabled: false,
                  label: 'Notification',
                },
                {
                  url: '/settings/building-blocks/collection-badge',
                  disabled: false,
                  label: 'Collection badge',
                },
                {
                  url: '/building-blocks/product-page-banner',
                  disabled: false,
                  label: 'Product page banner',
                },
                {
                  url: '/building-blocks/countdown-clock',
                  disabled: false,
                  label: 'Countdown clock',
                },
                {
                  url: '/cart-promotion-code-field',
                  disabled: false,
                  label: 'Cart promotion code field',
                },
                {
                  url: '/cart-promotion-summary',
                  disabled: false,
                  label: 'Cart promotion summary',
                },
              ],
            },
          ]}
        />
      </Navigation>
    </div>
  );
};

I tried to pass the event prop inside onClick function in the subNavigationItems but it doesn't allow. Also url prop is required.