fixed: Solve the problem of cleanup videoTrack.stop() destroying videoTrack.play().

We used Agora to build the video call functionality inside our app.

And we came across a strange bug.

If you are talking on one screen and transition to the next screen, one screen is not rendered.

And as a warning message.

```
DOMException - The play() request was interrupted
Agora-SDK [WARNING]: [track-video-1585208348-client-05197_3ff03] play warning: DOMException
```

is displayed.

Also, our app has the ability to reorder the video call screens, but for some reason only the first screen is not rendered.
Then the warning message appears.

After some research, I found out that the cleanup method `stop` in this library destroys `play`.

see [DOMException - The play() request was interrupted - Chrome Developers](https://developer.chrome.com/blog/play-request-was-interrupted/)

Because the cleanup `stop` is executed when a new screen is being built and `play` is being done, an interrupt is generated and the `play` is destroyed with an exception.

To prevent this, we changed `useEffect` to `useLayoutEffect`.
Now `stop` is executed before `play` is executed.
I couldn't think of any other decent way to deal with this since Agora returns `void` instead of `Promise`.

Author: ncaq