Using .map to iterate on two different arrays at the same time

I have two array of the same length, I would like to iterate on them and send the iterable to a new component.

The first array is haircutsLeft, the second is haircutsRight. Following this question: Using map to iterate through two arrays, I tried what they suggested with little success.

First try

export default function VotingComponent({haircutsLeft, haircutsRight}) {

    return(
        <Grid
            {haircutsLeft.map((haircutLeft, idx) =>
                <DisappearingComponent haircutLeft={haircutLeft} haircutsRight={haircutsRight[idx]} idx={idx}/>
            )}
        </Grid>
    )

}

It does not pass haircutsRight={haircutsRightLoop[idx]} to the DisappearingComponent because, if I console log it in DisappearingComponent, I get undefined

Second try

export default function VotingComponent({haircutsLeft, haircutsRight}) {

     haircutsLeft.map((haircutLeft, index) => {
         const haircutRight = haircutsRight[index];
         return (
             <div>
            <DisappearingComponent haircutLeft={haircutLeft} haircutsRight={haircutRight}/>

             </div>    
         );
     });
}

I get VotingComponent(...): Nothing was returned from render.

Third try - Following the comment's advice

export default function VotingComponent({haircutsLeft, haircutsRight}) {

    return haircutsLeft.map((haircutLeft, index) => {
        console.log(index)
        const haircutRight = haircutsRight[index];
        console.log(haircutRight)
        return (
            <div>
                <DisappearingComponent haircutLeft={haircutLeft} haircutsRight={haircutRight}/>
            </div>
        );
    });
}

I can console.log the index correctly, but haircutRight gives me undefined

This is the component to which I am sending the props

export default function DisappearingComponent({haircutLeft,  haircutRight}) {
    console.log("haircutLeft", haircutLeft) // Correct value
    console.log("haircutRight", haircutRight) // Undefined
    return(
            <div>
                <Grid item xs={6}>
                    <LeftCard haircutLeft={haircutLeft} />
                </Grid>
                <Grid item xs={6}>
                    <RightCard haircutRight={haircutRight}/>
                </Grid>
            </div>
    )

}