Can't assign keyboard focus to a TouchableHighlight inside a Flyout

I have a Flyout that contains two TouchableHighlights. I want to assign keyboard focus to the second one in the tree, so I create and assign a ref to it. However, calling focus() doesn't actually assign focus to the second Touchable at all, and focus always goes to the first focusable element in the component. I can always tab to the intended element, but I can't directly focus it.

Environment

react-native-cli: 2.0.1
react-native: 0.60.0-microsoft.3
node: v10.16.0
npm: 6.9.0
yarn: 1.16.0
SDK: 10.0.18362
Target Device: Desktop
VS 2019
Repros in Debug and Release

Steps to Reproduce

1. Create a Flyout with two TouchableHighlights in it.
2. Add a ref to the second TouchableHighlight.
3. Add a call to .focus() in ComponentDidMount()

Expected Behavior

Keyboard focus should default to the TouchableHighlight with the ref on it.

Actual Behavior

Keyboard focus defaults to the first TouchableHighlight, since it's the first focusable element in the View.

Reproducible Demo

I was able to repro this in RNTester. I updated view\src\RNTester\FlyoutExample.windows.tsx to do so. Here are the chunks I edited:

class FlyoutExample extends React.Component<{}, IFlyoutExampleState> {
  // tslint:disable-next-line:no-any
  private _anchor: any;
  private _anchorTwo: any;
  private _touchableRef: any; // added

public constructor(props: any) {
    super(props);
    this._anchor = React.createRef();
    this._anchorTwo = React.createRef();
    this._touchableRef = React.createRef(); //added
  }

//added
public componentDidUpdate() {
    if (this._touchableRef && this._touchableRef.current) {
      this._touchableRef.current.focus();
      console.log('Changing focus');
    }
  }

<Flyout
            isOpen={this.state.isFlyoutVisible}
            isLightDismissEnabled={this.state.isLightDismissEnabled}
            isOverlayEnabled={this.state.isOverlayEnabled}
            onDismiss={this._onFlyoutDismissed}
            target={this._anchor}
            placement={this.state.placementOptions}>
            <View
              style={{backgroundColor: 'lightgray', width: 300, height: 400}}>
            // added  
            <TouchableHighlight
                style={{width: 50, height: 50, backgroundColor: 'blue'}}
                accessibilityLabel="A blue box"
                accessibilityHint="A hint for the blue box."
                accessibilityRole="button">
                <Text>Blue</Text>
              </TouchableHighlight>
              <TouchableHighlight
                style={{width: 50, height: 50, backgroundColor: 'red'}}
                accessibilityLabel="A red box"
                accessibilityHint="A hint for the red box."
                accessibilityRole="button"
                ref={this._touchableRef}>
                <Text>Red</Text>
              </TouchableHighlight>**
             // end of addition
              <Text
                style={{
                  justifyContent: 'center',
                  paddingTop: 10,
                  paddingBottom: 30,
                }}>
                This is a flyout
              </Text>

_onFlyoutButtonPressed = () => {
    this.setState({buttonTitle: 'Open Flyout', isFlyoutVisible: false});
   // added below
    if (this._touchableRef && this._touchableRef.current) {
      console.log('Changing focus');
      this._touchableRef.current.focus();
    }
  };

Start in view/src/RNTester/FlyoutExample.windows.tsx and reproduce the issue with two TouchableHighlights, a ref on the second, and focus() from componentDidUpdate or the flyout button handler. Trace how Flyout focus is assigned on open and verify that the referenced second TouchableHighlight receives keyboard focus rather than the first focusable element.