VoiceMessageItemBody throws error

[Problem]
If a chat conversation contains a Voice Message, navigating to a different route after loading the chat throws multiple errors (at least in Vue). Error log:

react-dom.development.js:22839 Uncaught TypeError: Cannot read properties of undefined (reading 'apply')
    at window.<computed>.<computed> [as getElementById] (veaury.esm.js:1:7951)
    at window.<computed>.<computed> [as getElementById] (veaury.esm.js:1:8063)
    at useVoicePlayer.tsx:63:50
    at safelyCallDestroy (react-dom.development.js:22932:5)
    at commitHookEffectListUnmount (react-dom.development.js:23100:11)
    at commitPassiveUnmountInsideDeletedTreeOnFiber (react-dom.development.js:25098:11)
    at commitPassiveUnmountEffectsInsideOfDeletedTree_begin (react-dom.development.js:25048:5)
    at commitPassiveUnmountEffects_begin (react-dom.development.js:24956:11)
    at commitPassiveUnmountEffects (react-dom.development.js:24941:3)
    at flushPassiveEffectsImpl (react-dom.development.js:27038:3)
The above error occurred in the <VoiceMessageItemBody> component:

    at VoiceMessageItemBody (http://localhost:5173/node_modules/.vite/deps/@sendbird_uikit-react_Channel.js?v=9d56cf84:3424:22)
    at div
    at div
    at div
    at MessageContent (http://localhost:5173/node_modules/.vite/deps/@sendbird_uikit-react_Channel.js?v=9d56cf84:3812:22)
    at div
    at Message (http://localhost:5173/node_modules/.vite/deps/@sendbird_uikit-react_Channel.js?v=9d56cf84:4239:20)
    at div
    at div
    at div
    at MessageList (http://localhost:5173/node_modules/.vite/deps/@sendbird_uikit-react_Channel.js?v=9d56cf84:4545:15)
    at div
    at ChannelUI (http://localhost:5173/node_modules/.vite/deps/@sendbird_uikit-react_Channel.js?v=9d56cf84:5283:22)
    at UserProfileProvider (http://localhost:5173/node_modules/.vite/deps/chunk-SELTXYST.js?v=9d56cf84:816:5)
    at ChannelProvider (http://localhost:5173/node_modules/.vite/deps/chunk-DS256XBB.js?v=9d56cf84:2848:26)
    at Channel
    at div
    at div
    at Chat (http://localhost:5173/src/react_app/Chat.jsx:29:39)
    at VoicePlayerProvider (http://localhost:5173/node_modules/.vite/deps/chunk-EMHJQY24.js?v=9d56cf84:120:21)
    at VoiceRecorderProvider (http://localhost:5173/node_modules/.vite/deps/chunk-EMHJQY24.js?v=9d56cf84:9690:24)
    at VoiceMessageProvider (http://localhost:5173/node_modules/.vite/deps/@sendbird_uikit-react_SendbirdProvider.js?v=9d56cf84:2961:21)
    at LocalizationProvider (http://localhost:5173/node_modules/.vite/deps/chunk-45UIUFDP.js?v=9d56cf84:1288:24)
    at MediaQueryProvider (http://localhost:5173/node_modules/.vite/deps/chunk-45UIUFDP.js?v=9d56cf84:1320:24)
    at Sendbird (http://localhost:5173/node_modules/.vite/deps/@sendbird_uikit-react_SendbirdProvider.js?v=9d56cf84:2968:18)
    at Provider (http://localhost:5173/src/react_app/Chat.jsx:106:29)
    at r (http://localhost:5173/node_modules/.vite/deps/veaury.js?v=9d56cf84:257:12)
    at l (http://localhost:5173/node_modules/.vite/deps/veaury.js?v=9d56cf84:270:14)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries
runtime-dom.esm-bundler.js:36 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'nextSibling')
    at nextSibling (runtime-dom.esm-bundler.js:36:31)
    at getNextHostNode (runtime-core.esm-bundler.js:6269:16)
    at getNextHostNode (runtime-core.esm-bundler.js:6264:20)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5733:17)
    at ReactiveEffect.run (reactivity.esm-bundler.js:190:25)
    at instance.update (runtime-core.esm-bundler.js:5763:56)
    at updateComponent (runtime-core.esm-bundler.js:5588:26)
    at processComponent (runtime-core.esm-bundler.js:5521:13)
    at patch (runtime-core.esm-bundler.js:5119:21)
    at patchKeyedChildren (runtime-core.esm-bundler.js:5883:17)
runtime-dom.esm-bundler.js:35 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
    at parentNode (runtime-dom.esm-bundler.js:35:30)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5731:17)
    at ReactiveEffect.run (reactivity.esm-bundler.js:190:25)
    at instance.update (runtime-core.esm-bundler.js:5763:56)
    at updateComponent (runtime-core.esm-bundler.js:5588:26)
    at processComponent (runtime-core.esm-bundler.js:5521:13)
    at patch (runtime-core.esm-bundler.js:5119:21)
    at patchKeyedChildren (runtime-core.esm-bundler.js:5883:17)
    at patchChildren (runtime-core.esm-bundler.js:5826:21)
    at processFragment (runtime-core.esm-bundler.js:5506:17)

[UIKit Version]
v3.4.0 - v3.47

[Reproduction Steps]
Send a voice message / load a conversation with voice messages, then navigate to any other route.

[Frequency]
Always.

[Current impact]
Cannot use Voice Messages.

Hello @deciuca ,
There were issue in the useVoicePlayer hook, where when it attempt to get an elementById and it errors out. This could be due to the way that this “plugin” of sorts Renders the React code in Vue.
Request you to check with the latest version of React Uikit v3.5.2.

@rahul This issue has been fixed in veaury.