Dynamically imported component's elements not accessible on mount after route change

I have a component which statically renders components based on a json which specifies the structure. It works fine, but there's an issue with my PageHeader component:

On _app level I have an useEffect which is listening for path changes to get the an element of class header from PageHeader (if present) on each page and then do something with this element.
This worked fine when I imported every component normally without dynamic, but ever since I introduce dynamic imports, header is undefined. It seems that the component hasn't been build when the useEffect tries to access it?

Additionally, an important note is that header is undefined on route changes, on page reload everything seems to work as expected. How so?

Are dynamic components rendered client side? If so is there a way import components dynamically on build from data f.e. provided by getStaticProps or a static json?

const componentList: Record<string, any> = {
    BlockCards: dynamic<Data.BlockCards>(() =>
        import("../molecule/BlockCards").then(module => module.BlockCards)
    BlockNews: dynamic<Data.BlockNews>(() =>
        import("../molecule/BlockNews").then(module => module.BlockNews)
    PageHeader: dynamic<Data.PageHeader>(() =>
        import("../atom/PageHeader").then(module => module.PageHeader)

interface TemplateProps {
    data: Data.Main;

export const Template: React.FC<TemplateProps> = ({ data }) => {
    return (
            {data.content.map((item, index) => {
                const Component = componentList[item.component.type];

                if (!Component) return null;

                return (
                    <Block key={index}>
                        <Component {...item.component} {...props} />

useEffect(() => {
    const header = document.querySelector(".header");

    if (!header) {

    // do something
}, [router.pathname]);