how can i export to web components?

Hi, I just want to export this plugin to web components for vue or native javascript usage. So I use this https://github.com/bitovi/react-to-web-component, react to web component, and the codes like this:

index.tsx
import r2wc from "@r2wc/react-to-web-component"
import { Timeline } from '@xzdarcy/react-timeline-editor';
const VideoTimeline = r2wc(Timeline)
customElements.define("video-timeline", VideoTimeline)

index.html
<video-timeline></video-timeline>

However, it is not working! And got the error:

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at checkForNestedUpdates (react-dom.development.js:23795:1)
    at scheduleUpdateOnFiber (react-dom.development.js:21827:1)
    at Object.enqueueForceUpdate (react-dom.development.js:12496:1)
    at Component.forceUpdate (react.development.js:384:1)
    at Grid.recomputeGridSize (Grid.js:378:1)
    at index.esm.js:2715:1
    at invokePassiveEffectCreate (react-dom.development.js:23479:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
checkForNestedUpdates @ react-dom.development.js:23795
scheduleUpdateOnFiber @ react-dom.development.js:21827
enqueueForceUpdate @ react-dom.development.js:12496
Component.forceUpdate @ react.development.js:384
recomputeGridSize @ Grid.js:378
(匿名) @ index.esm.js:2715
invokePassiveEffectCreate @ react-dom.development.js:23479
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23566
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11268
flushPassiveEffects @ react-dom.development.js:23439
performSyncWorkOnRoot @ react-dom.development.js:22261
(匿名) @ react-dom.development.js:11319
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11268
flushSyncCallbackQueueImpl @ react-dom.development.js:11314
flushSyncCallbackQueue @ react-dom.development.js:11301
scheduleUpdateOnFiber @ react-dom.development.js:21885
dispatchAction @ react-dom.development.js:16131
(匿名) @ index.esm.js:3084
显示 23 更多框架
显示简略信息
react-dom.development.js:20077  The above error occurred in the <ForwardRef> component:

    at http://localhost:3000/static/js/bundle.js:2697:26
    at ScrollSync (http://localhost:3000/static/js/bundle.js:44536:86)
    at div
    at http://localhost:3000/static/js/bundle.js:2976:22

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.

xzdarcy / react-timeline-editor

how can i export to web components? #54