Javascript 在NextJS中使用计时器循环逐个打开手风琴项目

我在NextJS中创建了一个手风琴组件.现在，我想自动逐个打开手风琴项目，并 for each 手风琴项目设定自定义持续时间.此外，手风琴组旁边的图像应根据打开的手风琴项更改.

For example: https://www.perspective.co/(大约是本页面的第4部分)

Current Work

这是我的代码:

Accordion Item

'use client'

const OnboardItem = ({ title, description, duration, isOpen, toggle }:{ title:string, description:string, duration:number, isOpen:boolean, toggle:any }) => {

  return(
    <div className='relative'>
      <div className='w-0.5 bg-neutral-300 dark:bg-neutral-500 absolute left-0 top-0 bottom-0'></div>
      <div className='ps-5 items-center'>
        <p className={`text-2xl leading-[38px] select-none cursor-pointer ${isOpen ? 'text-black dark:text-primary' : 'text-neutral-400 dark:text-neutral-300'}`} onClick={toggle}>{title}</p>
        <div className={`grid mt-1 overflow-hidden ease-in-out ${isOpen ? 'accordion-animate-open pb-1' : 'accordion-animate'}`}>
          <div className='leading-7 min-h-0'><p className='select-none'>{description}</p></div>
        </div>
      </div>
    </div>
  )
}

export default OnboardItem

Accordion Group

const [isOpen, setIsOpen] = useState(0)
    
const toggleOpen = (id:any) => () => setIsOpen(id)
    
  onboardData.forEach((element, index) => {
        
 });
    
 { 
   onboardData.map(({title, description, duration}, index) => (
     <OnboardItem 
       key={index}
       title={title}
       description={description}
       duration={duration}
       isOpen={isOpen === index}
       toggle={toggleOpen(index)}
     />
   ))
 }

Data

export const onboardData = [
  {
    title: 'Discovery Call',
    description: 'How embark on a collaborative project, simply visit our website and access our contact form to get in touch where we collaborate with you to outline the project scope and determine how we can assist you with our services.',
    duration: 5000
  },
  {
    title: 'Prototype Creation',
    description: 'What embark on a collaborative project, simply visit our website and access our contact form to get in touch where we collaborate with you to outline the project scope and determine how we can assist you with our services.',
    duration: 15000
  },
  {
    title: 'Design & Development',
    description: 'How embark on a collaborative project, simply visit our website and access our contact form to get in touch where we collaborate with you to outline the project scope and determine how we can assist you with our services.',
    duration: 10000
  },
  {
    title: 'Testing Modules',
    description: 'Where embark on a collaborative project, simply visit our website and access our contact form to get in touch where we collaborate with you to outline the project scope and determine how we can assist you with our services.',
    duration: 5000
  },
  {
    title: 'Launch',
    description: 'Can embark on a collaborative project, simply visit our website and access our contact form to get in touch where we collaborate with you to outline the project scope and determine how we can assist you with our services.',
    duration: 10000
  },
];