Graphical artifacts in React app in mobile Chrome

Question

I have a React app which is rendering with graphical glitches that obscure elements of the page. This only happens in mobile Chrome on some phones (e.g. Oppo A91/CPH2021, Android 11, Chrome 110.0.5481.64). Here is a screenshot of the page with artifacts: With artifacts and what it should look like Should display

The HTML it is trying to render is:

<div class="ButtonContainer-nq0wh7-0 draESp">
    <div class="StandardButton__ButtonWrapper-sc-14ecf1u-3 dqqaVy">
        <button class="StandardButton__Button-sc-14ecf1u-2 dNUHaw">
            <span class="StandardButton__Text-sc-14ecf1u-1 fhvgIY">Under 18</span></button>
        <div type="multiChoice" class="Circle__Container-sc-8j3sau-0 ka-dixx"><svg class="svg" version="1.1" id="tick"
                viewBox="6 5 26 26">
                <polyline class="path" points=" 11.6,20 15.9,24.2 26.4,13.8 "></polyline>
            </svg></div>
    </div>
    ...
</div>

This was originally noticed in a production version. I have tried debugging the development version of the app on an affected phone with remote debugging via Chrome DevTools. The issue still occurs, but the console shows no errors. The artifacts show up both on the phone itself and the mirrored screen in DevTools. Attempting to interact with the page results in artifacts moving around and disappearing.

So far the issue has occurred in Chrome on two phones (an Oppo with Android 11 and a Huawei with Android 10). The issue does not occur in Firefox on the same phones.

Edit: After some further investigation, the issue only occurs when there are more than 5 buttons being displayed (i.e. reliably occurs for 6 buttons and reliably doesn't occur for 5 buttons).

I am stuck on what to try next and any suggestions are appreciated!