slate not working properly in shopify app

Question

hey all Im trying to use slate and slate-react in my shopify app project but it is throwing me an error (cannot read properties of null useRef from slate component) have tried exact same thing in my local project (cra) and its fine and works! what could be the problem ? here is the code:

const initialValue = [
  {
    type: 'paragraph',
    children: [{ text: 'A line of text in a paragraph' }],
  },
];
const HtmlEditorPage = () => {
  const editorRef = useRef(null);
   if (!editorRef.current) editorRef.current = withReact(createEditor());
   const editor = editorRef.current;
  return (
    <Frame>
      <Page>
        <Slate editor={editor} value={initialValue}>
          <Editable />
        </Slate>
      </Page>
    </Frame>
  );
};

export default HtmlEditorPage;

here is the error enter image description here