Unable to drag when React app rendered inside an iframe

[Tinyik]

Expected behavior

Component continues to work when rendered inside iframe.

Actual behavior

Draggables cannot be dragged when rendered inside iframe using react-frame-component. Work as expected when outside iframe.

Steps to reproduce

class Main extends React.Component {
    render() {
        return (
            <Frame> 
               <FrameContextConsumer>
               {
                   ({document, window}) => {
                      return (<Provider store={store}>
                                <App />
                            </Provider>)
                    }
                }
                </FrameContextConsumer>
            </Frame>
        )
    }
}

And use a dnd component inside App.

Suggested solution?

Does it have anything to do with the React global variable window and document by any chance?

What version of React are you using?

"react": "^16.13.1"

What version of react-beautiful-dnd are you running?

"react-beautiful-dnd": "^13.0.0"

What browser are you using?

Latest stable Chrome

Demo

N/A