Return to Question

I also noticed this in the [[...path]].tsx

// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// revalidation (or fallback) is enabled and a new request comes in.
export const getStaticProps: GetStaticProps = async (context) => {
  // reset context.params.path for /blogs only if
  // page is immediate descendent of /blogs (i.e.
  // not a blog page nested within a year/month folder)
  if (
    context.params?.path?.includes('blogs') &&
    context.params?.path.length === 3
  ) {
    // store original path within requestPath property
    context.params.requestPath = context.params.path;
    // set path to wildcard item
    context.params.path = [`blogs/,-w-,`];
  }

EDIT-1:

The canonical Url, I can see in my project is coming from Layout.tsx file as shown below:

{pageUrl && <link rel="canonical" key="meta-canonical" href={pageUrl} />}
        {(fields?.noindex?.value || fields?.nofollow?.value) && (
          <meta
            name="robots"
            key="meta-robots"
            content={
              fields?.noindex?.value && fields?.nofollow?.value
                ? 'noindex,nofollow'
                : fields?.noindex?.value
                ? 'noindex'
                : 'nofollow'
            }
          />
        )}

pageUrl is coming as:

const Layout = ({ layoutData }: LayoutProps): JSX.Element => {
  const { route, context: sitecoreContext } = layoutData.sitecore;
  const fields = route?.fields as RouteFields;
  const pageUrl = sitecoreContext?.itemPath as string;
  const isPageEditing = layoutData.sitecore.context.pageEditing;