how to pass header in ReactJW player?

I am using React jw player in reactjs.

Some of the files are playing and some are not. Here is the error I am getting

Access to XMLHttpRequest at 'https://XXXXXX.cloudfront.net/hls/XXXXX/index.m3u8' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Here is my code

<ReactJWPlayer
                    playerId="JwPlayer"
                    playerScript="https://cdn.jwplayer.com/libraries/XXXXX.js"
                    file={liveVideoUrl}
                    headers={[{ referer: "XXXXX.XX" }]}
                    id="jwplayer"
                    // playlist={
                    //   [{
                    //       sources: [
                    //               {
                    //                   file: liveVideoUrl,
                    //                   onXhrOpen: (xhr) => {
                    //                       console.log({xhr})
                    //                       xhr.setRequestHeader('referer', 'XXXX.XXX');
                    //                   },
                    //               },
                    //           ],
                    //       }]
                    //   }
                  />

Now I am trying to add the header in the player's setting. How can I do that or the error is related to something else?

Thanks