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?