Using GTM w/ Next.js can't get past CSP

I have custom CSP headers in next.config.js that are loaded into the head of the page in ./layouts.

const defaultCSP = {
    "script-src": [
        "'self'",
        "'unsafe-eval'",
        "'unsafe-inline'",
        `'nonce-${nonce}'`,
        "tagmanager.google.com/",
        "googletagmanager.com",       
    ],
    "script-src-elem": [
        "'self'",
        `'nonce-${nonce}'`,
        "tagmanager.google.com/",
        "googletagmanager.com",
    ],
};

Trying to use react-gtm-module-nonce like so in _app.tsx

useEffect(() => {
    TagManager.initialize({
        gtmId: GTM_CONTAINER_ID,
        auth: GTM_AUTH,
        preview: GTM_PREVIEW,
        nonce: NONCE,
    });
}, []);

but when the app is loaded I see the following error

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src-elem 'self' 'nonce-SOME_NONCE_VALUE' tagmanager.google.com/ googletagmanager.com Either the 'unsafe-inline' keyword, a hash ('sha256-r7NoIbKRzEIuATQ9EL7eN52m5xWoVwuBBTdGzzqnMbY='), or a nonce ('nonce-...') is required to enable inline execution.

It seems like I have the necessary items to run GTM but can't get past CSP. Any clues as to what's happening here? I've tried adding 'unsafe-inline' to script-src-elem but then it shows that it will be ignored if there's a nonce.