Gatsby shows page not found and then loads the content of the page on

I'm not really sure where the problem is, I'm using amazon cloud, s3 bucket to host the website with cloudfront and WordPress as CMS

I thought Gatsby will create a static page but it looks like is injecting the content, the homepage looks ok but any other page it has this problem

I've been reading on forums, removing plugins but I haven't found a solution to this, you guys can check for example https://londonfilmpremieres.com/the-sandman/ on a slow 3g connection

This is my gatsby-config.js

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.org/docs/gatsby-config/
 */

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

console.log(
  `This WordPress Endpoint is used: '${process.env.WORDPRESS_API_URL}/graphql'`
)

module.exports = {
  /* Your site config here */

  siteMetadata: {
    title: `London Film Premieres `,
    description: `With The latest upcoming film premieres in london. Exclusive celebrities photos and videos on the red carpet, interviews trailers and more!`,
    siteUrl: `${process.env.SITE_URL}`,
    image: "london-film-premieres.png",

  },

  plugins: [
    {
      resolve: "gatsby-plugin-google-tagmanager",
      options: {
        id: "xxxxxx",
        includeInDevelopment: false,
      },
    },
 
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        url: `${process.env.WORDPRESS_API_URL}/graphql`,
      },
    },
    {
      resolve: `gatsby-plugin-feed`,
      options: {
        query: `
          {
            site {
              siteMetadata {
                title
                description
                siteUrl
                site_url: siteUrl
              }
            }

            allWpPost{
              nodes{
                title
                excerpt
                date
                link
                slug
                acf_details{
                  simpleplot
                }
              }
            }         
          }
        `,
        feeds: [
          {
            serialize: ({ query: { site, allWpPost } }) => {
              return allWpPost.nodes.map(node => {
                return Object.assign(
                  {},
                  {
                    title: node.title,
                    description: node.acf_details.simpleplot,
                    date: node.date,
                    url: `${process.env.SITE_URL}/${node.slug}/`,
                    guid: `${process.env.SITE_URL}/${node.slug}/`,
                  }
                )
              })
            },
            query: `
              {
                allWpPost {
                      nodes {
                        title
                        slug
                        acf_details {
                          simpleplot
                        }
                        date
                    }
                  }
              }
            `,
            output: "/rss.xml",
            title: "London film premieres - RSS Feed",
          },
        ],
      },
    },
      `gatsby-plugin-sass`,
    `gatsby-plugin-react-helmet`,

    `gatsby-plugin-zopfli`,
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

gatsby-node.js

const createHomePage = require("./create/createHomePage")
const createPages = require("./create/createPages")
const createPost = require("./create/createPost")

exports.createPages = async ({ actions, graphql, reporter }) => {
  await createHomePage({ actions, graphql, reporter })
  await createPages({ actions, graphql, reporter })
  await createPost({ actions, graphql, reporter })
}

createPages.js

module.exports = async ({ actions, graphql, reporter }) => {
  const { createPage } = actions
  const { PostTemplateFragment } = require("../graphql/fragments.js")
  const pageTemplate = require.resolve("../src/templates/page-template.js")

  return graphql(
    `
      ${PostTemplateFragment}
      query MyQuery {
        allWpPage(filter: { isFrontPage: { eq: false } }) {
          nodes {
            id
            uri
            title
            content
          }
        }
        allWpPost {
          nodes {
            ...PostTemplateFragment
          }
        }
      }
    `
  ).then(result => {
    if (result.errors) {
      throw result.errors
    }

    const pages = result.data.allWpPage.nodes
    const posts = result.data.allWpPost.nodes

    pages.forEach(node => {
      createPage({
        path: node.uri,
        component: pageTemplate,
        context: {
          id: node.id,
          page: node,
          posts,
          postSearchData: {
            allPosts: posts,
            options: {
              indexStrategy: "Prefix match",
              searchSanitizer: "Lower Case",
              TitleIndex: true,
              AuthorIndex: true,
              SearchByTerm: true,
            },
          },
        },
      })
      reporter.info(`page created:  ${node.uri}`)
    })
  })
}

my page-template.js it's just a normal file fetching data no other logic involve

import React from "react"
import Layout from "../components/layout"
import { graphql } from "gatsby"

export const query = graphql`
  query ($id: String) {
    wpPage(id: { eq: $id }) {
      title
      content
    }
  }
`

const PageTemplate = props => {
  const {
    pageContext: {
      postSearchData: { allPosts, options },
    },
  } = props

  const page = props.data.wpPage

  return (
    <Layout posts={allPosts} engine={options}>
      <h1 dangerouslySetInnerHTML={{ __html: page.title }} />
      <div dangerouslySetInnerHTML={{ __html: page.content }} />
    </Layout>
  )
}

export default PageTemplate

I think I need to change something on gatsby-node but not sure exactly what could I do.