How to rewrite google Tag Manager Args from typescript to react

Question

I am trying to insert google tags into my react site so I copied a code from a typescript code I have but I get the error Type annotations can only be used in TypeScript files. so now I have no idea on how to rewrite this code in an acceptable format in reactjs. Please help using the code below

_app.js

import React, {useEffect} from 'react'
import TagManager, {TagManagerArgs} from 'react-gtm-module'
import { Toaster } from 'react-hot-toast'
import './Product.scss'
import {Layout} from '../components'
import '../styles/globals.css'
import { StateContext } from '../context/StateContext'

function MyApp({ Component, pageProps }) {
  const gtmId = process.env.NEXT_PUBLIC_GTM_ID || "";

  const tagManagerArgs: TagManagerArgs = {
    gtmId,
  }

  useEffect(() => {
    TagManager.initialize(tagManagerArgs)
  }, [])

  return (
    <StateContext>
      <Layout>
        <Toaster />
        <Component {...pageProps} />
      </Layout>
    </StateContext>
  )
}

export default MyApp

Answer 1

You can remove the type annotation and update like the following code.

const tagManagerArgs = {
    gtmId,
  }