export const MobileFAQ = ({ faqs = [], defaultOpen = false }) => {
  const { isOn: open, toggle } = useToggle(defaultOpen);
  const ToggleIcon = open ? MinusIcon24Gray : PlusIcon24Gray;
  return (
    <div className="p16">
      <h4 className="section-text-5 mb16">Frequently asked questions</h4>

      {faqs.map((u, index) => (
        <>
          <div className="faq-item" onClick={toggle}>
            <span className="c-black-3 text-medium">{u.question}</span>
            <div className="faq-toggle-icon-mobile"></div>
          </div>

          <Collapse in={open}>
            <div className="faq-answer c-black-3 text-4">{u.ans}</div>
          </Collapse>

          {index !== faqs.length - 1 && (
            <div
              style={{ height: 1, width: '100%', backgroundColor: '#e6e6e6' }}
              className="mt12 mb16"
            />
          )}
        </>
      ))}
    </div>
  );
};

I have created faq array which is showing question and answer on toggle but it get open every index which should be coming as index wise