Remix template navigation

[dynmark]

I'm having issues with navigation into specific screens on my remix template application.

The following text snippets works just fine

import { useNavigate } from "@remix-run/react";
...

const AppPage = () => {
  const navigate = useNavigate();
  ...

  <Button onClick={() => { navigate("/app/additional") }}>
    Create
  </Button>
}

However, when I try to add a custom page into the app:

// app/routes/app._index.tsx
import { useNavigate } from "@remix-run/react";
...
const AppPage = () => {
  const navigate = useNavigate();
  ...

  <Button onClick={() => { navigate("/app/additional") }}>
    Create
  </Button>
  <Button onClick={() => { navigate("/app/create") }}>
    Create
  </Button>
}

// app/routes/app.create.tsx
import { Card, Layout, Page, Text, BlockStack } from "@shopify/polaris";
import { TitleBar } from "@shopify/app-bridge-react";
import FormProvider from "~/components/Form/FormProvider";

export default function AdditionalPage() {
  return (
    <FormProvider errors={[]}>
      <Page>
        <TitleBar title="Additional page">
       </TitleBar>
        <Layout>
          <Layout.Section>
            <Card>
              <BlockStack gap="300">
                <Text as="p" variant="bodyMd">
                  Test
                </Text>
              </BlockStack>
            </Card>
          </Layout.Section>
        </Layout>
      </Page>
    </FormProvider>
  );
}

I am unable to navigate into the `/create` page by clicking the button that has call to the navigation function. This seems to be caused by the components inside the `/create` page. I've tried a lot of different configurations of components, but sometimes the same configuration works, while the other time it does not, which seems to be very random. Navigating into the default `/additional` page works fine every time.

This issue is only happening after deploying the application to heroku or fly. Running it locally on dev mode works just fine.