Gatsby Content Sync points to wrong page

Question

I am using Gatsby with Strapi and all the previews are triggered by @strapi/plugin-gatsby-preview

In one of the collection types I have a small problem, the preview button when I click it - opens up a wrong page. It points to one of the programmes (the single programme page), where it should actually point to a dynamic page set (listing page for those programmes).

I went through the documentation and this is what it says:

"In the case that your content lives on multiple pages, for example a blog post page and a blog listing page, and you find you’re being routed to the page you don’t want to view your preview on, you can specify which node owns which page using the ownerNodeId setting in the createPage API. Set the ownerNodeId to the Gatsby node.id of the node you want to preview for the page. Note that the ownerNodeId must correspond to the node.id of a node which is queried on that page via a GraphQL query."

I have tried to do that and I did this - for each dynamic page set (listing page), and for each programme inside of it (single programme page) I create a page, I pass the ownerNodeId to the nested loop but it still doesn't work.

Is there something that I am doing wrong?

  data.allStrapiDynamicPageSet.edges.forEach(({ node: { id, strapi_id, pageSlug, location, programmes } }) => {
    actions.createPage({
      path: `dynamic-page-set/${strapi_id}`,
      component: path.resolve("./src/templates/dynamic-page-sets-listing.js"),
      context: {
        id: id,
      },
    });
    programmes.forEach((prog) => {
      actions.createPage({
        path: `i/${prog.progSlug}/${pageSlug}`,
        component: path.resolve("./src/templates/dynamic-page-set.js"),
        ownerNodeId: id,
        context: {
          id: id,
          progId: prog.id,
          type: "DYNAMIC_PAGE_SET",
          ProgrammeName: pageSlug,
          degreeId: prog?.degree_level?.id,
          locationId: location?.id,
        },
      });
    });
  });