I have created and integrated GA4 tag in my HTML file. In my app, user can login and perform drag and drop div in a container. My requirement is that I need to send user id from database to GA4 after login and generate report which will show that which user id has performed drag and drop. I have tried multiple solutions but I am not able to achieve it. I did following things at current moment.

1. In my index.html I have added following:

   <script async src="https://www.googletagmanager.com/gtag/js?id=G-ABCDEF123"></script>
   <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() { dataLayer.push(arguments); }
      gtag('js', new Date());
      gtag('config', 'G-ABCDEF123');
   </script>

2. I have created Custom Dimension in GA4 console with scope as User and User Property as app_user_id.

3. After user login is successful, I am sending user id to GA4.

   window.gtag('set', 'user_properties', { 'app_user_id': 123 });

4. Now, if user drags and drops div in container then I am sending event with user id as below:

   window.gtag('event', 'Drop Event', { 'event_category': 'Container Interaction', 'event_label': 'Drop', 'value': 1, 'app_user_id': 123 });

In Engagement section if I try to filter out the Page and Screens based on user id, it shows me not-set for logged in pages. I am not sure if I am missing anything. I did not get an article which will show all these steps start to end. Also, I need to generate report of individual user based on its user id. Any help here, will be really appreciated. Thanks in advance.