Vimeo player randomly fails for DNS lookup while using react native webview

Question

I'm working on a project, where I show vimeo video in react-native-webview. The URL used for playing video is constructed like this: https://player.vimeo.com/video/${videoId}?autoplay=1.

I'm facing a strange issue, when application is in production some devices fails to play the video. Webview returns errors like, 'ERR_NAME_NOT_RESOLVED' or 'ERR_EMPTY_RESPONSE' or 'ERR_CONNECTION_CLOSED'. So far now I've observed this issue in Pixel devices, Samsung devices and Apple devices. This issue is occurring randomly.

What can be the reason for this? How can it be resolved?

I'm using react-native-webview to play the video as follows:

                <WebView
                  style={{
                    backgroundColor: 'transparent',
                    flex: 1,
                    opacity: 0.99,
                  }}
                  javaScriptEnabled={true}
                  scrollEnabled={false}
                  allowFullScreen={true}
                  overScrollMode="never"
                  onError={async err => {
                    if (
                      err &&
                      err?.nativeEvent &&
                      err?.nativeEvent?.description
                    ) {
                      await appErrorApiCall(
                        `content vimeo video: ${err?.nativeEvent?.description}`,
                      );
                    }
                  }}
                  userAgent='Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
                  (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36'
                  source={{
                    uri:
                      vimeoUrl 
                  }}
                  cacheMode="LOAD_NO_CACHE"
                  cacheEnabled={false}
                  renderLoading={() => <QsLoader />}
                />