use useEffect

app/contexts/EngineProvider.tsx

@@ -1,6 +1,6 @@
 import {
   ReactNode,
-  useLayoutEffect,
+  useEffect,
   useRef,
 } from "react";
 import { EngineContext } from "./EngineContext";
@@ -14,17 +14,23 @@ interface Props{
 export const EngineProvider = ({ children }: Props)=>{
   const editorRef = useRef<Editor | null>(null);
 
-  useLayoutEffect(() => {
+
+  useEffect(() => {
     //componentDidMount
-    if (editorRef.current == null) {
+    if (editorRef.current !== null ) {
+      console.warn('Editor Engine already exist');
+    }else if (document.getElementById("video-scene") === null){
+      console.error('Editor Engine need a target cavas with the id "video-scene"');
+    }else{
       editorRef.current = new Editor();
       editorRef.current.initialize();
     }
   }, []);
-  
+
   return(
     <EngineContext.Provider value={editorRef.current}>
       {children}
     </EngineContext.Provider>
   );
-}
+}
+