[React]Dynamic change sources of playlist plugin not working.

[leopku]

Environment

"@oplayer/core": "^1.2.31",
"@oplayer/hls": "^1.2.23",
"@oplayer/plugins": "^1.0.8",
"@oplayer/react": "^1.2.9",
"@oplayer/ui": "^1.2.33",

• platform: // macOS 11.7.10 Big Sur
• browser: // chromium 110.0.5481.177

🐛 Bug Report

Change sources of playlist plugin after an async invoking not take effect.

To Reproduce

Steps to reproduce the behavior:

const [sources, setSources] = useState();

const { data, isLoading } = useAjax({ url: 'xxxx/api' })

useEffect(() => setSources(data?.data?.playlist || []), [data])

return (
<ReactOPlayer ref={playerRef} plugins={[
  ui(),
  hls(),
  new PlaylistPlugin({
    initialIndex: 0,
    autoNext: true,
    sources,
  })
]}/>
)

After data fetched from ajax, playlist component wasn't filled in by new data.  

Expected behavior

playlist filled by data from ajax

Link to repl or repo (highly encouraged)

Please provide a minimal repository on GitHub.

Issues without a reproduction link are likely to stall.

[shiyiya]

use api to update source. it's not reactive

//useEffect(() => setSources(data?.data?.playlist || []), [data])
player.context.playlist.changeSourceList(list)