如何默认打开反应表的第一个子组件，并手动打开其他子组件

import React, { useState } from 'react';

const ParentComponent = () => {
  const [expanded, setExpanded] = useState(Array.from({ length: numberOfChildren }, (_, i) => i));

  // 其他代码...

  return (
    <div>
      {children.map((child, index) => (
        <ChildComponent key={index} isExpanded={expanded.includes(index)} />
      ))}
    </div>
  );
};

import React from 'react';

const ChildComponent = ({ isExpanded }) => {
  return (
    <div>
      <button onClick={handleExpand}>{isExpanded ? '折叠' : '展开'}</button>
      {isExpanded && (
        <div>
          {/* 子组件的内容 */}
        </div>
      )}
    </div>
  );
};

import React from 'react';

const ChildComponent = ({ isExpanded }) => {
  const handleExpand = () => {
    if (isExpanded) {
      setExpanded(expanded.filter(index => index !== childIndex));
    } else {
      setExpanded([...expanded, childIndex]);
    }
  };

  return (
    <div>
      <button onClick={handleExpand}>{isExpanded ? '折叠' : '展开'}</button>
      {isExpanded && (
        <div>
          {/* 子组件的内容 */}
        </div>
      )}
    </div>
  );
};