Optional chain operator – using with .map | Javascript

how I should use optional chain operator with .map in React? Should I additionally add ‘?.’ to an item inside map, and ‘?.’ before ‘.map’?

{data && data?.videoCollection?.items?.map((item : any, index : number) =>
  <div className='flex flex-col items-center w-full' key={index}>
    <p className='text-3xl font-bold text-[var(--white)] text-center mt-20 px-2'>{item?.title}</p>
    <p className='text-lg text-[var(--white)] text-center mt-8 md:max-w-[50%] px-4'>{item?.description}</p>
  </div>
)}

or

{data && data?.videoCollection?.items.map((item : any, index : number) =>
  <div className='flex flex-col items-center w-full' key={index}>
    <p className='text-3xl font-bold text-[var(--white)] text-center mt-20 px-2'>{item.title}</p>
    <p className='text-lg text-[var(--white)] text-center mt-8 md:max-w-[50%] px-4'>{item.description}</p>
  </div>
)}

which way is correct?