I am trying to implement copy to clipboard function to set the current url of each page , I have followed the Gatsby docs : gatsby

import React from "react"
import { graphql } from "gatsby"
const Page = ({ location, data }) => {
  const canonicalUrl = data.site.siteMetadata.siteURL + location.pathname
  return <div>The URL of this page is {canonicalUrl}</div>
}
export default Page
export const query = graphql`
  query PageQuery {
    site {
      siteMetadata {
        siteURL
      }
    }
  }
`

eventually I get an error of Cannot read properties of undefined (reading 'pathname')

any idea how to solve this ?