Switch to a single hook

src/components/results.js

@@ -1,16 +1,12 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { Model } from "survey-core";
 
 export default function Results({ surveyData }) {
-  const [survey, setSurvey] = useState(null);
-  const [vizPanel, setVizPanel] = useState(null);
-
   useEffect(() => {
     (async () => {
       const survey = new Model(surveyData.survey);
-      setSurvey(survey);
 
       const { VisualizationPanel } = await import("survey-analytics");
 
@@ -21,24 +17,19 @@ export default function Results({ surveyData }) {
           allowHideQuestions: false,
         }
       );
-      setVizPanel(currentPanel);
+
+      currentPanel.render("surveyVizPanel");
+
+      return () => {
+        const panelElement = document.getElementById("surveyVizPanel");
+
+        if (panelElement) {
+          panelElement.innerHTML = "";
+        }
+      };
     })();
   }, [surveyData]);
 
-  useEffect(() => {
-    if (vizPanel) {
-      vizPanel.render("surveyVizPanel");
-    }
-
-    return () => {
-      const panelElement = document.getElementById("surveyVizPanel");
-
-      if (panelElement) {
-        panelElement.innerHTML = "";
-      }
-    };
-  }, [vizPanel]);
-
   return (
     <div>
       <div id="surveyVizPanel" />