Can't push Google Analytics 4 (GA4) custom dimension metric from React

Question

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
});

Answer 1

After trying similar, I ran across this post. "Use the Source, Luke." But in this case, I don't think react-ga4 is complete, the functions add/remove arguments as they call each other, but you can't send what you need. The documentation is non-existent even though this seems to be "the" react package for ga4. You do want set but in gtag land.

Got this link: https://developers.google.com/analytics/devguides/collection/ga4/reference/config#user_properties

from here: https://support.google.com/analytics/answer/14239618?sjid=8621583802217015244-NA#zippy=%2Canalyze-the-custom-dimension-in-a-report%2Canalyze-the-custom-dimension-in-an-exploration%2Cbuild-an-audience-using-the-dimension

I ended up doing this:

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

You can also pass it in as gaOptions or gtagOptions:

ReactGA.initialize([{
  trackingId: '123',
  gaOptions: { user_properties: { company_name: companyName } },
}]);

With Chrome GA Debug on, you'll see:

And under event you'll see (up is user_properties):