Issue adding an Emoji to TextInput for React-Native on iOS

I've been having an issue with maxLength on <TextInput/>in ReactNative and I'm pretty sure its only happening on iOS.

The problem:

If the last character of an input is an emoji, and that emoji puts you over the maxlength number then it deletes the entire input! An example of it is if the maxLength is set to 5 and the input is "xxxx" (4 characters) and then you add an emoji the entire input text gets deleted. I'm sure this has something to do with emojis mostly being 2 characters but I can't seem to find an "eloquent" work around!

Snack to see exactly what I'm talking about:

(I've only been able to replicate it in iOS) https://snack.expo.io/@sararan/textinput

Things I've tried:

1. Adding an onKeyPress event (that gets hit before the onChangeText event) that calls e.stopPropagation() and e.preventDefault() (both for good measure ;) ). But it doesn't actually stop the event and I'm thinking it has to do with how react handles events and maybe that it's already bubbled up by this time?

2. Taking out maxLength altogether and creating my own rules that splices the input if its over the length I want and then replaces any special characters something like...

   const onChangeText = (value) => {
     if (value.length > 5) {
       value = value.slice(0, 30).replace(/[^\w\s]/gi, '');
     }
     setText({ value });
   };
   

   but this solution seems to cause the flickering that we all hate with these types of solutions.

I'm wondering if anyone might have run into this before and might have a more eloquent solution? Thank you for your help!