It seems like it would be easy, but I don't know

{Info.seedShapeDisplayText} -> one two three four ..
one onClick <div> Hi Number Minsu, Bar : 1 </div>
two onClick <div> Hi Number Jenny, Bar : 3 </div>

In summary, when 'one li tag text' is clicked, the div will output '{NumberStatus}' value corresponding to 'one text', and {functionInfolabels} corresponding value.

Click on the first button I want to print the first array values ​​Minsu and 1. How would you like to write code?

let functionInfolabels = ProductDetail && ProductDetail.chart?.functionalsInfo?.[0].materialsInfo?.[0].ingredientsInfo?.map(array => array.ingredientDisplayText);
console.log(functionInfolabels) // Array( 1,3,124 ..)

let NumberStatus = ProductDetail && ProductDetail.chart?.functionalsInfo?.[0].materialsInfo?.[0].ingredientsInfo?.map(array => array.chartStatus) 
console.log(NumberStatus) // Array ( Minsu, Jenny, Youngmin, ...)    


return (
          {ProductDetail && ProductDetail.chart?.functionalsInfo?.length ? 
            ProductDetail.chart?.functionalsInfo.map(Info => (
            <li key={Info.id}>{Info.seedShapeDisplayText}</li>
            )) : <li>There is not</li>}

// {Info.seedShapeDisplayText} -> one two three four .. 
// one onClick <div> Hi Number Minsu, Bar : 1 </div>
// two onClick <div> Hi Number Jenny, Bar : 3 </div>
....
<div>
Hi Number {NumberStatus} //  Minsu, Jenny,  Youngmin,  Jiho ...

<Bar 
labels={functionInfolabels} // 1,  3, 124 .... 
/>
</div>


)