Dynamically style Text child in MenuOption on menu open

Question

I need a conditional render of the MenuOption's at the moment of opening the menu.

It would appear that the MenuOption's in MenuOptions are rendered before the menu even opens from my tests.

Based on a timestamp diff I need to change and Icon and a style.

I notice there is that will fire when the menu opens, I wrote a function to update a global variable but the global variable seems to be set when the Menu is built, not when the options are opened.

Simplified version of what I am trying. Note the conditional style in each of the <Text> elements canSplit

let canSplit = false;

const canSplitEntry = () => {
    canSplit =  true;  
};

return (
    <Menu onOpen={() => canSplitEntry()}>
        <MenuTrigger style={styles.menuTrigger}>
            <Icon
                name="more-vert"
                color={theme.text.color}
                size={20}
            />
        </MenuTrigger>
        <MenuOptions style={theme.popupMenu}>
            <MenuOption
                style={styles.menuOption}
                onSelect={() => canSplit ? setModal('splitEntry', logTimestamp) : {}}
            >
                <SplitIcon color={theme.text.color} size={15} />
                <Text style={[theme.text, (canSplit ? theme.opacityStrong : theme.opacityMid), { paddingLeft: 10 }]}>
                    Split
                </Text>
            </MenuOption>

            <MenuOption
                style={styles.menuOption}
                onSelect={() => canMerge ? setModal('mergeEntry', logTimestamp) : {}}
            >
                <MergeIcon color={theme.text.color} size={15} />
                <Text style={[theme.text, !canMerge && theme.opacityStrong, { paddingLeft: 10 }]}>
                    Merge
                </Text>
            </MenuOption>
        </MenuOptions>
    </Menu>
)

I would hope that when onOpen is fired the global var is updated and the MenuOption's would respond to the change rather than pre render and never change again