NextJS dynamically rendered components via SSR losing reactivity

Question

I'm trying to use a Contentful references field to generate SSR landing pages which are populated with dynamic React components mapped to each content type.

The references field is basically an array of other content types that the user can add / edit / remove / reorder as they see fit:

The Contentful API is called in getServerSideProps.

export async function getServerSideProps(context) {
    const config = require('../../config');
    const contentful = require('contentful');
    const client = contentful.createClient({
        space: config.contentful.spaceId,
        accessToken: config.contentful.deliveryAccessToken,
        environment: config.contentful.environment,
    });

    const content = await client.getEntries({
        content_type: 'landingPage',
        'fields.slug': context.query.slug,
        include: 2,
    });
    
    return { props: { landingPage: content.items[0]}};
};

The components are then rendered dynamically like so:

const LandingPage = (props) => {
    return (
        <MainLayout>
            <div>{renderComponents(props.landingPage.fields.body)}</div>
        </MainLayout>
    );
};

renderComponents: (componentMap is just an object mapping item.sys.contentType.sys.id strings to React components)

const renderComponents = (data) => {
        return data
            .filter((item) => {
                return item.sys.contentType.sys.id in componentMap;
            })
            .map((item, index) => {
                const Component = componentMap[item.sys.contentType.sys.id];
                const props = item.fields;
                
                return (
                    <Component {...props} />
                );
            })
};

This all seems to works fine in both dev and production builds, however I've noticed that if I create another non-SSR page that uses these same components, all interactivity is lost from the SSR pages only.

This happens for all components on the dynamic page, even the ones that were not generated by the renderComponents function (for example, the navigation, which is standard across the entire site, and is part of MainLayout).

Deleting the non-dynamic pages immediately causes the interactivity return.

There are no error messages in either the browser console or terminal, which is making it difficult to debug exactly what is going wrong here.

Any advice appreciated,

Thanks

---

next.config.js is unchaged from default:

module.exports = {
  useFileSystemPublicRoutes: true,
};