Resolve unmounting instance issue

config/eslint.config.js

@@ -5,9 +5,10 @@ module.exports = {
   },
   extends: [
     "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:react-hooks/recommended",
+    "plugin:react/recommended"
   ],
   parser: "@typescript-eslint/parser",
   parserOptions: {
@@ -17,20 +18,20 @@ module.exports = {
     ecmaVersion: 12,
     sourceType: "module"
   },
-  plugins: ["prettier", "react", "@typescript-eslint", "simple-import-sort"],
+  plugins: ["@typescript-eslint", "prettier", "react", "simple-import-sort"],
   overrides: [
     {
       files: [".js", ".jsx", ".ts", ".tsx"]
     }
   ],
   rules: {
-    indent: ["error", 2],
+    "@typescript-eslint/no-explicit-any": "off",
     "linebreak-style": ["error", "unix"],
     "simple-import-sort/exports": "error",
     "simple-import-sort/imports": "error",
+    indent: ["error", 2],
     quotes: ["error", "double"],
-    semi: ["error", "always"],
-    "@typescript-eslint/no-explicit-any": "off"
+    semi: ["error", "always"]
   },
   settings: {
     react: {

example/app.jsx

@@ -6,11 +6,19 @@ import * as torus from "./sketches/torus";
 import "./example.css";
 
 function App() {
-  const [state, setState] = useState({ rotation: 160, sketch: box.sketch });
+  const [state, setState] = useState({
+    rotation: 160,
+    sketch: box.sketch,
+    unmount: false
+  });
 
   return (
     <>
-      <ReactP5Wrapper sketch={state.sketch} rotation={state.rotation} />
+      {state.unmount ? (
+        <p>Unmounted the sketch</p>
+      ) : (
+        <ReactP5Wrapper sketch={state.sketch} rotation={state.rotation} />
+      )}
       <input
         type="range"
         defaultValue={state.rotation}
@@ -27,14 +35,20 @@ function App() {
       <button
         onClick={() => {
           const useTorus = state.sketch === box.sketch;
-          setState({
-            ...state,
-            sketch: useTorus ? torus.sketch : box.sketch
-          });
+          setState({ ...state, sketch: useTorus ? torus.sketch : box.sketch });
         }}
       >
         Change Sketch
       </button>
+      {state.unmount ? (
+        <button onClick={() => setState({ ...state, unmount: false })}>
+          Remount
+        </button>
+      ) : (
+        <button onClick={() => setState({ ...state, unmount: true })}>
+          Unmount
+        </button>
+      )}
     </>
   );
 }