TypeScript: Type Error when injecting graphemeSplitter on stringSplitter option as per the documented demo

[kenshanta]

When using an emojis (mac) inside the .typeString() method in a NextJs project, it renders as "?" at first across all browsers (chrome, safari, firefox)

My initial approach to fix this issue - as i discovered emojis are an array of characters and the last character only has the emoji value - was to slice the character to its last index and render that. the issue persisted

My second approach was to use the element and provide the key of the emoji or even the emoji itself inside the element's child. the results i got was [object, Object]

Finally after checking and following up with the documentation and how emojis are implemented, i saw the use of the graphemeSplitter package to create a stringSplitter as such:

const stringSplitter = (string: string) => { const splitter = new GraphemeSplitter() return splitter.splitGraphemes(string) }
using this declared method on the typewritter-effect's stringSplitter option inside a TS file returns an error
Type '(string: string) => string' is not assignable to type '(text: string) => string[]'
And obviously no issues on JS files.

I tried a workaround to introduce an array inside typeString method but that returns another TS error declaring the value MUST be of type string.
I had to alter the node_modules typewriter-effect stringSplitter method to return an expected type string instead of string[]

This issue is mainly focused on the demo provided in the typewriter-effect npm readme emoji splitter demo

Let me know if any additional info is needed to resolve this issue, or if im missing anything

Thanks in advance 🙏