Untitled

Currently the responseDat has the below value=
{
                    rfiId: 14501,
                    questions: [
                        {
                            rfiId: 14501,
                            id: 18001,
                            question: 'What is React Router?',
                            description: 'Ds non sem diam. Curabitur tincidunt nisi eu tortor egestas mattis. Praesent vel efficitur risus. Etiam sed purus justo. Nullam molestie vitae ipsum non aliquet. Donec vel lorem maximus purus ullamcorper consectetur.',
                            answers: [
                                {
                                    id: 101,
                                    quesnId: 18001,
                                    answer: 'React Router is a routing library for React.',
                                    state: 'IOWA',
                                },
								{
                                    id: 102,
                                    quesnId: 19001,
                                    answer: 'N/A',
                                    state: 'LA',
                                },
                            ],
                        },
                        {
                            rfiId: 14501,
                            id: 18051,
                            question: 'What are the main components provided by React Router?',
                            description: '',
                            answers: [],
                        },
                    ],
                }


update the questions code to render the data corectly


import React from 'react';
import { Accordian, AccordianElement, Label, Button, Para } from '@d-lift/uxcomponents';
import PropTypes from 'prop-types';
import '@/Validations/customValidations';

const Questions = ({ responseData }) => {
    console.log(responseData);
    return (
        <div className="ux-rfi-green-border mt-4">
            <Label labelKey="Questions"></Label>

            {responseData.questions?.map((question, index) => (
                <Accordian id={`outer-accordian-${index}`} key={question.id}>
                    <AccordianElement headerText={question.question}>
                        <Label>{question.answers.length} &nbsp Responses:</Label>

                        {question.answers.map((answer, aIndex) => (
                            <Accordian id={`inner-accordian-${index}-${aIndex}`} key={answer.id}>
                                <AccordianElement headerText={answer.state}>
                                    <Para>{answer.answer}</Para>
                                    <Button
                                        id={`edit-btn-${index}-${aIndex}`}
                                        size="small"
                                        className="ux-rfi-green-button float-right mt-4 mb-2"
                                        labelKey="edit_response"
                                        // click={() => Navigate.to('/create-rfi')}
                                    ></Button>
                                </AccordianElement>
                            </Accordian>
                        ))}

                        <Button
                            id={`respond-btn-${index}`}
                            size="small"
                            className="ux-rfi-green-button float-right mt-4 mb-2"
                            labelKey="respond_question"
                            // click={() => Navigate.to('/create-rfi')}
                        ></Button>
                    </AccordianElement>
                </Accordian>
            ))}
        </div>
    );
};

Questions.propTypes = {
    responseData: PropTypes.array.isRequired,
};

export default Questions;