React Accordion Closing on state change - reactjs

Question

I have 2 tabs which have accordions in those tabs. Whenever user switch between the tabs with accordion open in one tab, again coming back to the previous tab then the accordion is closed. How can we make the accordion to open until user close it.
I am using React Accordion installed from npm.
Here i am in Tab 1 with accordion as opened, as shown in image
Now i switched to tab 3, as shown in image
Now again i switched from tab 3 to tab 2 then you can see here the accordion is closed automatically. Here I don't want to close the accordion on changing of tabs, it should close until user closes it.
This is the problem i am facing here.

Answer 1

You can do this. Have a specific tabs state array for all tabs and store the current state(true=open & false=close) of each tab.
And updating only the state of current tab and keeping the state of rest of the tabs as same.
import { useState } from "react";
import "./styles.css";
export default function App() {
const tabNumbers = 4; //number of tabs
const [tabs, setTabs] = useState([...Array(tabNumbers).fill(false)]); //a state storing state of tabs
const [currentTab, changeTab] = useState(0); //currently active tab
function toggleIndex() {
const updatedTabs = [...tabs];
updatedTabs[currentTab] = !updatedTabs[currentTab]; //only toggle current tab's state
setTabs(updatedTabs); //store updated tab's state
}
return (
<div className="App">
<div style={{ display: "flex", gap: "2rem" }}>
{[...Array(tabNumbers)].map((_, index) => (
<div
style={{ cursor: "pointer" }}
key={index}
onClick={() => changeTab(index)}
>
Tab {index}
</div>
))}
</div>
<div>
<button onClick={toggleIndex}>
This is the tab {currentTab}.<br /> This is currently{" "}
{tabs[currentTab] ? "open" : "close"}
</button>
</div>
</div>
);
}