All panels go inactive - accordion

Question

When I change the "activeKey", all panels go inactive. Why?
import React, {useEffect, useState} from "react";
import { Collapse } from 'antd';
const { Panel } = Collapse;
const text = `
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
`;
export default function Abc() {
setTimeout(() => {
setOpenKey(["2"])
}, 3000)
const [openKey, setOpenKey] = useState(["1"])
return (
<div>
<Collapse accordion activeKey={openKey} >
<Panel header="This is panel header 1" key="1">
<p>{text}</p>
</Panel>
<Panel header="This is panel header 2" key="2">
<p>{text}</p>
</Panel>
<Panel header="This is panel header 3" key="3">
<p>{text}</p>
</Panel>
</Collapse>
</div>
)
}
My goal is to drive through the "useState" hook, when I open or close the panels.

Answer 1

When you use activeKey, it's means the component is a controlled component. You should change activeKey in onChange handler in order to active other panels.
You can do like this
const [openKey, setOpenKey] = useState(["1"])
const callback = (key) => {
setOpenKey([key])
}
return (
<div>
<Collapse accordion activeKey={openKey} onChange={callback} >
<Panel header="This is panel header 1" key="1">
<p>{text}</p>
</Panel>
<Panel header="This is panel header 2" key="2">
<p>{text}</p>
</Panel>
<Panel header="This is panel header 3" key="3">
<p>{text}</p>
</Panel>
</Collapse>
</div>
)