`enabled={false}` on `<Editor/>` does not take effect if `json` prop is set to `<Frame/>`

Describe the bug This issue is similar to #373, but a little bit different.

enabled={false} prop on <Editor/> is working fine if there is no prop like json or data set on <Frame/>.

But things started to break if preloaded data is set to <Frame/> through json or data prop, any immediet elements inside <Element canvas/> can be dragable regardless of enabled prop on <Editor/>

Expected behavior There shouldn’t be anything dragable if enabled={false} and whether preloaded data is set or not.

My unsuccessful workarounds I tried using the following pieces of code but the issue still persists.

// force disabling editor on ComponentDidMount doesn't fix the issue
useEffect(()=>{
  actions.setOptions((options) => (options.enabled = false));
}, []);

or

// may be turning it on and off again can fix the issue but nothing fixed
useEffect(()=>{
  actions.setOptions((options) => (options.enabled = true));
  actions.setOptions((options) => (options.enabled = false));
}, []);

or

// force disabling dragable area doesn't fix the issue, immediet nodes can still be dragable
const { enabled } = useEditor(state => ({ enabled: state.options.enabled })); // when enabled is false
<Element canvas={enabled}>

Your environment

Software	Version(s)
craft.js	0.2.0-beta.3
React	16.8.0
TypeScript	-
Browser	Chrome 99.0.4844.74 (Official Build) (64-bit)
npm/Yarn	8.5.0
Operating System	Ubuntu 18.04

Thank you for making this amazing tool anyway. I appreciate your time.

[prevwong]

Released in v0.2.0-beta.4 🎉

[aptarmy]

Thank you!