Using OneDrive Document Editor to Edit Files in React App

Question

I am currently building a React app that allows users to view items in their OneDrive, select a file, create a new file, edit existing files, share the file with other users, and select a file to upload to our application. I am able to view the files using FileList component of @microsoft/mgt-react, creating a file can be handled by the graph api.

However, I am facing an issue where the OneDrive document editor is not loading within the iframe in my React app. Instead, I receive an error message stating that the page was

 refused to be framed because an ancestor violates the following Content Security Policy directive

I created an edit link using the createLink endpoint and tried to open the webUrl returned by this api in an iframe. The webUrl is opening fine in a new tab.

Can you please help me with this issue? I would like to be able to use the OneDrive document editor in my React app to allow my users to edit their files directly within my app. If it is at all possible, and if not, what are the alternatives that I can use.

Please suggest the best way to implement this.

Thank you for your assistance.

Sincerely,