React Native Help Dismissing Keyboard when tapping outside of it

Question

I've included my code and all style pertaining to it. I've made my own type of text input component using basic react native components added together. The functionality I want to add is if I use this component in another view or file that when the keyboard pops up and I tap anywhere on the screen thats off of the keyboard then the keyboard disappears.

export const PrimaryTextInput: React.FC<PrimaryTextInputProps> = ({placeholder, style, ...props}) => {
  const [isFocused, setIsFocused] = useState(false);
  const [hasText, setHasText] = useState(false);

  const handleFocus = () => setIsFocused(true);
  const handleBlur = () => {
    setIsFocused(false);
    setHasText(Boolean(props.value));
  };

  const handlePressOutsideKeyboard = () => {
    console.log('Should dismiss');
    Keyboard.dismiss();
  };

  const containerStyle = [BaseComponentStyle.primaryTextInputContainer, {height: (isFocused || hasText) ? 60 : 50}, {borderColor: isFocused ? '#FFF' : '#FFFFFF66'}, style?.containerStyle];
  const placeholderStyle = [BaseComponentStyle.primaryTextInputPlaceholder, (isFocused || hasText) ? BaseComponentStyle.primaryTextInputPlaceholderShift : null];
  const inputStyle = [BaseComponentStyle.primaryTextInputText, style?.inputStyle];

  return (
    <TouchableWithoutFeedback onPress={handlePressOutsideKeyboard}>
      <View style={containerStyle}>
        <Text style={placeholderStyle}>
          {placeholder}
        </Text>
        <TextInput
          style={inputStyle}
          onFocus={handleFocus}
          onBlur={handleBlur}
          {...props}
        />
      </View>
    </TouchableWithoutFeedback>
  );
};

    primaryTextInputContainer:
    {
        borderWidth: 0.75,
        borderRadius: 10,
        marginVertical: 5,
        textAlign: 'left',
        justifyContent: 'center',
        color: '#FFFFFF',
        borderColor: '#FFFFFF',
        backgroundColor: 'rgba(0,0,0,0.5)',
        minHeight: 62,
        width: '100%',
    },
    primaryTextInputPlaceholder:
    {
        position: 'absolute',
        left: 15,
        fontSize: 16,
        color: '#FFFFFF66',
        justifyContent: 'center',
        textAlign: 'left',
    },
    primaryTextInputPlaceholderShift:
    {
        position: 'absolute',
        left: 15,
        top: 5,
        fontSize: 12,
        color: '#FFF',
    },
    primaryTextInputText:
    {
        fontSize: 16,
        color: '#FFF',
        left: 15,
        top: 5,
        justifyContent: 'center',
        textAlign: 'left',
    },

I have tried everything I could think of from other stackoverflow posts and online solutions but it doesn't seem to work. I tried a TouchableWithoutFeedback around the component, as well as using a touchableopacity and it doesn't work either. I believe these don't work because I want to incorporate this functionality into the component itself and not have to always set this up on each page or view I use this component. Thank you so much appreciate whatever help I can get.