SurveyJS and NextJS - Issue when setting new state of variable - reactjs

Question

Version of NextJS: 12.0.8
Version of SurveyJS: 1.9.5
Testing Browser: Chrome, FF
Testing the app (vercel):
You can test the app here: https://jem-surveyjs-nextjs.vercel.app/
Description of the issue:
I combine SurveyJS with NextJS to generate a multi-page survey. The code for the survey is added into a component.
A custom variable can be manipulated using useState.
Every time the variable is set to a different value the survey reloads and jumps back to the first page instead of staying on the current page.
You can clearly see this effect in the dev-tools console.
To replicate the issue simply do the following:
Create a Nextjs app
Add the survey-react module (npm i survey-react)
add the following content to assets/json/survey-json.js
export const surveyJSON = {
"pages": [
{
"name": "page1",
"elements": [
{
"type": "radiogroup",
"name": "Speech Test",
"hasComment": true,
"commentText": "add comment",
"choices": [
"item1",
"item2",
"item3"
]
}
]
},
{
"name": "page2",
"elements": [
{
"type": "radiogroup",
"name": "Try again",
"hasComment": true,
"commentText": "add comment",
"choices": [
"item4",
"item5",
"item6"
]
}
]
}
]
};
Add the following content to components/Survey.js
import {useState, useEffect} from 'react'
import * as SurveyJs from "survey-react";
import "survey-react/survey.css";
import {surveyJSON} from "../assets/js/survey-json";
// Survey Component
const Survey = (props) => {
const [custParam, setCustParam] = useState(false);
// Avoid rehydration conflict
// https://nextjs.org/docs/messages/react-hydration-error
const [hasMounted, setHasMounted] = useState(false);
useEffect(() => {
setHasMounted(true);
}, []);
if (!hasMounted) {
return null;
}
/**
* Handle Custom Function
*/
const handleClick = () => {
// Example 3:
setCustParam(!custParam);
console.log("HANDLE CLICK - CUSTOM PARAM: ", custParam)
};
/**
* afterRenderQuestionHandler
*/
const afterRenderQuestionHandler = function (survey, options) {
// Example 2:
//setCustParam(!custParam);
console.log("AFTER RENDER QUESTION - CUSTOM PARAM: " , custParam)
const tarea = document.querySelector('.sv_q_other');
if ( tarea ) {
tarea.onclick = function(){
handleClick();
}
}
}
let mySurvey = new SurveyJs.Model(surveyJSON);
mySurvey.showCompletedPage = true;
// Example 1:
//setCustParam(true);
console.log("BEFORE RENDER SURVEY - CUSTOM PARAM: " , custParam)
return (
<SurveyJs.Survey
model={mySurvey}
onAfterRenderQuestion={afterRenderQuestionHandler}
/>
);
}
export default Survey;
Finally add this to your pages/index.js
import styles from '../styles/Home.module.css'
import Survey from '../components/Survey'
export default function Home() {
return (
<div>
<Survey />
</div>
)
}
As you can see I have added 3 different examples of how the issue can be created in the components/Survey.js. Example 3 is the active one right now, but you can un-comment Example 2 or Example 1 to see a different effect of the issue.
How can I avoid this reloading and jump to the first page?
Any help that can point me in the right direction would be appreciated
UPDATE:
Many thanks #juliomalves!!
I have added a useState for my Survey Object
const [mySurvey, setMySurvey] = useState({});
and inside the already existing useEffect I've added the following:
setMySurvey( new SurveyJs.Model(surveyJSON) );
I finally just had to remove this line to make it all work:
let mySurvey = new SurveyJs.Model(surveyJSON);