next-seo: next-seo not working outside of _app.js

Whatever I put in other next pages weather they be dynamically generated or not does not show up in the initial render of the page thus does not replace what is defined in _app.js.

_app.js

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { CssBaseline, ThemeProvider } from '@material-ui/core';
import { darkTheme } from '../styles/themes';
import { ContextWrapper } from '../lib/AppContext';
import MainLayout from '../components/layout/MainLayout';

import { DefaultSeo } from 'next-seo';
import SEO from '../next-seo.config';

export default function MyApp(props) {
  const { Component, pageProps } = props;
  const site = useSite();

  useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <>
      <DefaultSeo {...SEO } />
      <ContextWrapper>
        <ThemeProvider theme={darkTheme}>
          <CssBaseline />
          <MainLayout>
            <Component {...pageProps} />
          </MainLayout> 
        </ThemeProvider>
      </ContextWrapper>
    </>
  );
}

MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.object.isRequired,
};

next-seo.config.js

export default {
  defaultTitle:  'MedisSite',
  openGraph: {
    title: 'MedisSite',
    type: 'website',
    locale: 'en_US',
    url: process.env.WEB_URI,
    images: [
      {
        url: '/image/ogHome.jpg',
      },
    ], 
    site_name: 'MedisSite',
  },   
  
  additionalMetaTags: [
    {
      name: 'viewport',
      content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
    },
    {
      name: 'application-name',
      content: 'MedisSite',
    },
    {
      name: 'apple-mobile-web-app-capable',
      content: 'yes',
    },
    {
      name: 'apple-mobile-web-app-status-bar-style',
      content: 'black',
    },
    {
      name: 'apple-mobile-web-app-title',
      content: 'Me',
    },
    {
      name: 'format-detection',
      content: 'telephone=no',
    },
    {
      name: 'mobile-web-app-capable',
      content: 'yes',
    },
    {
      name: 'msapplication-config',
      content: '/browserconfig.xml',
    },    
    {
      name: 'msapplication-TileColor',
      content: '#000000'
    },
    {
      name: 'msapplication-tap-highlight',
      content: 'no'
    },
    {
      name: 'theme-color',
      content: '#000000'
    },
  ],
  
  additionalLinkTags: [
    {
      rel: 'apple-touch-icon',
      href: '/icon/apple-touch-icon.png'
    },
    {
      rel: 'apple-touch-icon',
      sizes: '152x152',
      href: '/icon/apple-touch-icon-152x152.png'
    },
    {
      rel: 'apple-touch-icon',
      sizes: '180x180',
      href: '/icon/apple-touch-icon-180x180.png'
    },
    {
      rel: 'icon',
      type: 'image/png',
      sizes: '32x32',
      href: '/icon/favicon-32x32.png'
    },
    {
      rel: 'icon',
      type: 'image/png',
      sizes: '16x16',
      href: '/icon/favicon-16x16.png'
    },
    {
      rel: 'manifest',
      href: '/manifest.webmanifest'
    },
    {
      rel: 'mask-icon',
      href: '/icon/safari-pinned-tab.svg',
      color: '#000000'
    },
    {
      rel: 'shortcut icon',
      href: '/icon/favicon.ico'
    },
  ],
}

post/[postId].js

import React from 'react';
import { NextSeo } from 'next-seo';
import PropTypes from 'prop-types';
import nc from 'next-connect';

import DeskPost from "@/components/post/desk-post/DeskPost";
import MobilePost from "@/components/post/mobile-post/MobilePost";

import { withWidth, Hidden } from '@material-ui/core';

import { findPostById } from '@/api-lib/db';
import { database } from '@/api-lib/middlewares';
import { useCurrentUser } from '@/lib/user/hooks';


function Post({ post }) {
  const [user, { mutate }] = useCurrentUser();
  const title = post.part ? `${post.title} - ${post.part}` : post.title
  const url = `${process.env.WEB_URI}post/${post.id}`;
  const image = post.UHDstills.main;

  return (
    <>
        <NextSeo
          title={title}
          openGraph={{
            url: url,
            title: title,
            images: [
              {
                url: image,
              }
            ]
          }}
        />

      <Hidden smDown>
        <DeskPost post={post} />
      </Hidden>


      <Hidden mdUp>
        <MobilePost post={post} />
      </Hidden>
    </>
  );
};

Post.propTypes = {
  width: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired,
};

export default withWidth()(Post);


export async function getServerSideProps(context) {
  await nc().use(database).run(context.req, context.res);
  const post = await findPostById(context.req.db, context.params.postId);

  if(!post) {
    return {
      notFound: true,
    };
  }
  post.publishDate = post.publishDate.toJSON();
  post.shootDate = post.shootDate.toJSON();
  return { props: { post }};
}

Any help would be very much appreciated…