Wrong type on GoogleTagManager component's dataLayer prop

[dsosborn]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/zealous-chebyshev-5xchpd?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cls64pckf00063b6haq462fij%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cls64pckf00023b6hrn38v72w%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cls64pckf00043b6hmkzrlp5v%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cls64pckf00053b6hnzqzhs7v%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cls64pckf00023b6hrn38v72w%2522%253A%257B%2522id%2522%253A%2522cls64pckf00023b6hrn38v72w%2522%252C%2522activeTabId%2522%253A%2522cluvmkz7200e83b6i7zccgfg1%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cls64pcke00013b6h9kjaax4k%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252F.codesandbox%252Ftasks.json%2522%252C%2522id%2522%253A%2522cluvmkz7200e83b6i7zccgfg1%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522cls64pckf00053b6hnzqzhs7v%2522%253A%257B%2522id%2522%253A%2522cls64pckf00053b6hnzqzhs7v%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522port%2522%253A3000%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522cluvll7nt006j3b6ixzkiilwk%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522cluvll7nt006j3b6ixzkiilwk%2522%257D%252C%2522cls64pckf00043b6hmkzrlp5v%2522%253A%257B%2522id%2522%253A%2522cls64pckf00043b6hmkzrlp5v%2522%252C%2522activeTabId%2522%253A%2522cluvmjvp800c93b6i0iq6y9t2%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522cluvmjvp800c93b6i0iq6y9t2%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

To Reproduce

Use GoogleTagManager component with dataLayer prop:

<GoogleTagManager dataLayer={{ websiteEnv: environment }}  gtmId="12345" />

Current vs. Expected behavior

In order to populate a variable to the dataLayer, it has to have an object pushed to it. Putting an array of strings into this prop doesn't do anything in GTM. Adding dataLayer={{websiteEnv:"dev"}} successfully populates the GTM variable, but is flagged by Typescript, because the props are typed as:

export type GTMParams = {
    gtmId: string;
    dataLayer?: string[];
    dataLayerName?: string;
    auth?: string;
    preview?: string;
};

I would expect GTMParams dataLayer prop type to be something like {[key: string]: string}

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.4.0: Wed Feb 21 21:44:31 PST 2024; root:xnu-10063.101.15~2/RELEASE_X86_64
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.1.1
  eslint-config-next: 14.1.1
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: standalone

Which area(s) are affected? (Select all that apply)

App Router, Script optimization (next/script)

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

Tested with @next/[email protected]

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.