I created a custom dimension in GA4 called company_name and it’s scoped at the user level. ga4 custom dimension dashboard

On the React side, I’m trying to add the company name as an event parameter as part of my custom event tracking like this:

import ReactGA from 'react-ga4';

ReactGA.initialize([
  {
    trackingId: process.env.REACT_APP_GA4_DESTINATION_ID!,
  },
  {
    trackingId: process.env.REACT_APP_GA4_ANALYTICS_ID!,
  },
]);

export const analytics = () => {
  return {
    trackEvent: ({
      eventCategory,
      eventAction,
      eventLabel,
      eventValue,
      nonInteraction,
      companyName,
    }: ITrackEventParams) => {
      ReactGA.event(
        {
          category: eventCategory,
          action: eventAction,
          label: eventLabel, // optional
          value: eventValue, // optional, must be a number
          nonInteraction: nonInteraction, // optional, true/false
        },
        { company_name: companyName }
      );
    },
  };
};

But when I trigger the event I don’t see the company_name in the event parameters when I check the Google Analytics Debugger extension.

GA debugger

I’ve seen posts similar to my issue but they’re all for pushing custom dimensions to universal analytics (UA), not GA4 which is what I’m using now. I’m also using the react-ga4, not the react-ga library.

I’ve also tried doing

ReactGA.event(
        {
          category: eventCategory,
          action: eventAction,
          label: eventLabel,
          value: eventValue,
          nonInteraction: nonInteraction
        },
        { dimension2: companyName }
);

And
ReactGA.set({dimension2: companyName}) or ReactGA.set({company_name: companyName})

And

ReactGA.gtag("set", "company_name", {
    company_name: companyName
});