How to Make Gutenberg Repeater Field - reactjs

Question

Want to make a Quiz application on WordPress Gutenberg with React? The problem goes, when I try to make a repeater field of the quiz section. I use UseState to make the components Repeat the section onClick. But I can't edit the input field after repeating it.
index.js
import { registerBlockType } from "#wordpress/blocks";
import "./style.scss";
import Edit from "./edit";
import save from "./save";
import metadata from "./block.json";
registerBlockType(metadata.name, {
attributes: {
ids: { type: "array", default: 1},
question: { type: "string", default:"Example Question"},
answers: { type: "array", default: [""] },
correctAnswer: { type: "number", default: undefined },
bgColor: { type: "string", default: "#ededed" },
},
edit: Edit,
save,
});
edit.js `
import { __ } from "#wordpress/i18n";
import {
TextControl,
Flex,
FlexBlock,
FlexItem,
Button,
Icon,
} from "#wordpress/components";
import { useBlockProps } from "#wordpress/block-editor";
const { useState} = wp.element;
import "./editor.scss";
import QuizWrapper from "./components/QuizWrapper";
import TestComponent from "./components/TestComponent";
export default function Edit(props) {
const [quizwrapper, setQuizwrapper] = useState([<QuizWrapper props={props} key={0} />])
const blockProps = useBlockProps({
className: "quiz-wrapper",
});
function addSection() {
setQuizwrapper([...quizwrapper,<QuizWrapper props={props} key={quizwrapper.length} />]);
}
return (
<div {...blockProps}>
<QuizWrapper props={props}></QuizWrapper>
{quizwrapper}
<Button isPrimary onClick={addSection}>
Add Another Section
</Button>
</div>
);
}
When I use <QuizWraper /> as a component it works fine on editing and changing on Question and Answer section, image has been uploaded below
but for the UseState hook for repeating the component {quizwrapper} repeates the section but doesn't allow me to edit and change the section
Image of the editor WordPress dashboard
QuizWrapper.jsx
import React from 'react'
import Question from "./Question"
import Answers from "./Answers"
const QuizWrapper = ({props}) => {
return (
<div className='quizes'>
<Question props={props}></Question>
<Answers props={props}></Answers>
</div>
)
}
export default QuizWrapper
Question.js
import { TextControl } from "#wordpress/components";
export default function Question({props}) {
function updateQuestion(value) {
props.setAttributes({ question: value });
}
return (
<div className="question">
<h2 style={{ fontSize: "20px", margin: "20px 0 8px 0" }}>Questions: </h2>
<TextControl
value={props.attributes.question}
onChange={updateQuestion}
/>
</div>
);
}
Answer.js
import { TextControl, Button, Icon } from "#wordpress/components";
export default function Answers({ ids, props }) {
function markasCorrect(index) {
props.setAttributes({ correctAnswer: index });
}
function deleteAnswer(indextoDelete) {
const newAnswer = props.attributes.answers.filter(function (x, index) {
return index != indextoDelete;
});
props.setAttributes({ answers: newAnswer });
if (indextoDelete == props.attributes.correctAnswer) {
props.setAttributes({ correctAnswer: undefined });
}
}
return (
<div className="answers" key={ids}>
<p style={{ fontSize: "13px", margin: "20px 0 8px 0" }}>Answers: </p>
{props.attributes.answers.map((answer, index) => {
return (
<div className="answer-wrapper">
<Button onClick={() => markasCorrect(index)}>
<Icon
className="mark-as-correct"
icon={
props.attributes.correctAnswer == index ? "yes-alt" : "yes"
}
/>
</Button>
<TextControl
value={answer}
onChange={(updateanswer) => {
const newAnswers = props.attributes.answers.concat([]);
newAnswers[index] = updateanswer;
props.setAttributes({ answers: newAnswers });
}}
></TextControl>
<Button
isLink
className="deleteBtn"
onClick={() => deleteAnswer(index)}
>
Delete
</Button>
</div>
);
})}
<Button
isPrimary
onClick={() => {
props.setAttributes({
answers: props.attributes.answers.concat([""]),
});
}}
>
Add Another Answer
</Button>
</div>
);
}
Need Solution: How I can make the repeater section of the <Quizwapper>component and how I can make the repeater section where the <Question/> and <Answer/> components will work fine.