How to render subNavigation components of shopify polaris

Question

I need to render one component at a time but some how my subNavigation routes does not work it works for Navigation routes but does not show me subNavigation items, I've also tried it with the help of react routes but it gives me conflicts with the shopify routes Here are my routes

Navigations:

      <Navigation location="./">
        <Navigation.Section
          items={[
            {
              url: '/setup',
              icon: SettingsMajor,
              label: 'Setup App',
              onClick: props.changeSetupTabToActive
            },
            {
              url: '/manage/freeshipping',
              label: 'Manage',
              icon: ManagedStoreMajor,
              subNavigationItems: [
                {
                  url: '/manage/freeshipping',
                  icon: ShipmentMajor,
                  label: 'Free Shipping Bar',
                  onClick: props.changeFreeShippingBarTabToActive
                },
                {
                  url: '/manage/freesample',
                  icon: AddProductMajor,
                  label: 'Free Samples',
                  onClick: props.changeFreeSampleTabToActive
                }
              ],
            },
            {
              url: '/support/faq',
              label: 'Support',
              icon: CircleInformationMajor,
              subNavigationItems: [
                {
                  url: '/support/faq',
                  icon: QuestionMarkMinor,
                  label: 'FAQ\'s',
                  onClick: props.changeEmailUsTabToActive
                },
                {
                  url: '/support/emailus',
                  icon: InviteMinor,
                  label: 'Email Us',
                  onClick: props.changeFaqsTabToActive
                }
              ],
            },
          ]}
          separator
        />
      </Navigation>
    </>
  )
}