Semantic UI Popup in DataTables position way off

Question

I am trying to add some custom filter controls for a DataTables table using Semantic UI Popup.

The table is being built server-side by an ASP.NET application, and I was asked to add sorting and filtering, so I thought I'd take advantage of the fact that DataTables can be used by just pointing it at a table in the DOM that already has data in it. DataTables has the sorting built-in, but I wanted to add a little more sophisticated filtering than just the regular DataTables search, and I wanted drop-down controls to come off the headers, so I thought Semantic UI Popup would be just the thing.

Unfortunately, the calculations that Semantic UI is doing to figure out the offset for where the popups should be placed are way, way off.

Code example in this codepen.

The strange thing is, I do have it working perfectly in another page, and I am trying to figure out what the difference is. The other "page" is actually a little CRA React app where I am using DataTables inside a component.

I'm following this methodology to get DataTables working in React, and although it works on my site, the example I tried to set up in this codesandbox does not seem to want to work now at least loads up without an error, but the same Semantic popup misalignment is present, even though that is set up just like I have my React project / component set up (where the popup position calculations do work). So unfortunately I still can't provide an example where the popup calculations work correctly.

Can anyone help me figure out what I need to add to the first example to get the popup calculations correct? I'm fine with adding other wrapping divs with whatever CSS is necessary for the popup calculations to latch onto.