React native: ensure the event gets bubbled

This must be trivial but I can't seem to figure out.

Context: I have a custom component to hide the keyboard everytime the user taps somewhere on the screen.

HideKeyboard.tsx

import {  TouchableWithoutFeedback, Keyboard, } from 'react-native'
import React from 'react'

export interface HideKeyboardProps {
    children: React.ReactNode;
}

export default function HideKeyboard(props: HideKeyboardProps) {
    return (
        <TouchableWithoutFeedback onPress={() => { Keyboard.dismiss(); }}>
            {props.children}
        </TouchableWithoutFeedback>
    )
}

This works fine, but the problem arises when the user taps on a button on the screen. The expected behaviour would be - the keyboard dismisses and the click handler of the button gets executed.

But, because of the HideKeyboard control, the initial tap gets captured and is used to dismiss the keyboard and so the user has to tap again.

Is there a way to tackle this? Can we somehow execute the event in the onPress handler?

from React native: ensure the event gets bubbled