I have integrated React-accessible-accordion into my React application. The click functionality is working correctly, but I am facing an issue with the arrow icon not appearing on the accordion. Upon comparing my DOM structure with the example provided in npm, it seems that the div for the icon itself is missing from my DOM.
Here is a snippet of my code:
import React from 'react';
import ReactDOM from 'react-dom';
import {
Accordion,
AccordionItem,
AccordionItemTitle,
AccordionItemBody,
} from 'react-accessible-accordion';
import 'react-accessible-accordion/dist/fancy-example.css';
import 'react-accessible-accordion/dist/minimal-example.css';
<div className="container">
<Accordion>
<AccordionItem>
<AccordionItemTitle>
<h4>Hello, This is me..</h4>
</AccordionItemTitle>
<AccordionItemBody>
Some Text
</AccordionItemBody>
</AccordionItem>
</Accordion>
</div>
The arrow icon should come from this line of code:
<div class="accordion__arrow" role="presentation"></div>I noticed that this specific div is not being added to my elements. Could this be due to a missing line like
document.querySelector('[data-mount]')For reference, here is the link I looked at - npm react-accessible-accordion