Gatsby pagination problems

Hello I'm trying to build a paginated blog with gatsby and MDX, when I'm on the homepage my URL is '/' and when I click on one of my posts then the URL will become '/slug' and everything is ok but when I go to page 2 and the URL is '/2' and I click on one of my posts the URL became '/2/slug' (instead of '/slug') and I can't access my post, the post exists and I can access if I type his slug in the URL without the '/2'. In my gatsby-node where I create the pagination, I'm just passing my slug as a path so I can't figure out from where the /2 is coming in the URL when I click on the post

exports.createPages = async function ({ actions, graphql }) {
 const { data } = await graphql(`
   query {
     allMdx(sort: { fields: frontmatter___date, order: DESC }) {
       edges {
         node {
           frontmatter {
             slug
           }
           id
         }
       }
     }
   }
 `)

 const postPerPage = 3

 const numPages = Math.ceil(data.allMdx.edges.length / postPerPage)

 Array.from({ length: numPages }).forEach((_, i) => {
   actions.createPage({
     path: i === 0 ? `/` : `/${i + 1}`,
     component: require.resolve("./src/templates/allPosts.js"),
     context: {
       limit: postPerPage,
       skip: i * postPerPage,
       numPages,
       currentPage: i + 1,
     },
   })
 })

 data.allMdx.edges.forEach(edge => {
   const slug = edge.node.frontmatter.slug
   const id = edge.node.id
   actions.createPage({
     path: slug,
     component: require.resolve(`./src/templates/singlePost.js`),
     context: { id },
   })
 })
}

This is how I pass the slug as a prop to my template

import React from "react"
import { ButtonWrapper } from "../elements"

export const Button = ({ children, href }) => {
  return <ButtonWrapper to={href}>{children}</ButtonWrapper>
}

import React from "react"
import { CardWrapper, P, H2 } from "../elements"
import { Button } from "../components"

export const ContentCard = ({ date, title, excerpt, slug }) => {
  return (
    <CardWrapper>
      <P size="xSmall" textAlign="center" margin="0 0 0.5rem 0" color="dark2">
        {date}
      </P>
      <H2 textAlign="center" margin="0 0 1rem 0">
        {title}
      </H2>
      <P size="small" color="dark2" textAlign="center" margin="0 0 1.5rem 0">
        {excerpt}
      </P>
      <Button href={slug}>Read More</Button>
    </CardWrapper>
  )
}

import React from "react"
import { graphql } from "gatsby"
import {
  Container,
  Content,
  ContentCard,
  FeatureImage,
  Pagination,
} from "../components"
import { H1, P } from "../elements"

const allPosts = ({ pageContext, data }) => {
  const { currentPage, numPages } = pageContext

  const isFirst = currentPage === 1

  const isLast = currentPage === numPages

  const prevPage = currentPage - 1 === 1 ? "/" : `/${currentPage - 1}`

  const nextPage = `${currentPage + 1}`

  const posts = data.allMdx.edges

  return (
    <Container>
      <FeatureImage />
      <Content>
        <H1 textAlign="center" margin="0 0 1rem 0">
          Id turpis posuere nam habitasse at mus viverra.
        </H1>
        <P color="dark2" textAlign="center">
          Enim nunc amet, eu, vitae nunc. Et in elementum aliquet nunc mauris,
          nulla. Convallis viverra neque quam mi sit.Id turpis posuere nam
          habitasse at mus viverra.
        </P>

        {posts.map(post => {
          return (
            <ContentCard
              key={post.node.frontmatter.slug}
              date={post.node.frontmatter.date}
              title={post.node.frontmatter.title}
              excerpt={post.node.frontmatter.excerpt}
              slug={post.node.frontmatter.slug}
            />
          )
        })}
      </Content>

      <Pagination
        isFirst={isFirst}
        isLast={isLast}
        prevPage={prevPage}
        nextPage={nextPage}
      />
    </Container>
  )
}

export default allPosts

export const pageQuery = graphql`
  query AllPostsQuery($skip: Int!, $limit: Int!) {
    allMdx(
      sort: { fields: frontmatter___date, order: DESC }
      skip: $skip
      limit: $limit
    ) {
      edges {
        node {
          frontmatter {
            slug
            title
            date
            excerpt
          }
        }
      }
    }
  }
`