react-native-tvos - TouchableOpacity Causes SVG Elements to Disappear

Question

I am using react-native-tvos to create an app. I am trying to display SVG elements that respond to the remote. I have tried using TouchableOpacity as well as Pressable on the elements. Whenever I wrap the elements with those they no longer appear. I've looked through dozens of S/O posts and have tried various things. Such as zIndex, flex on container. I also tried the react-native-gesture-handler, but that doesn't seem to work for tvos.

I've broken the code down to something very simple. Just a circle in the middle of the screen.

import Svg, {Circle} from 'react-native-svg';
import * as React from 'react';
import {TouchableOpacity, View,} from 'react-native';

const App = () => {
    return (
      <View>
          <Svg x="0px" y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;">
            <TouchableOpacity style={{
                opacity: 1,
                fill: "#FF0000",
                stroke: "5",
                zIndex: 100,
              }} onPress={() => alert('PRESSED')}>
              <Circle cx="960" cy="540" r="100" opacity="1" fill="#FF0000"/>
            </TouchableOpacity>
          </Svg>
      </View>
    );
};

export default App;