You can do array.find inside the map (codesandbox) -

{teamSliderContent.map((item) => (
  <p key={item.id}>
    {item.Title}
    <img
      width={100}
      height={100}
      alt="pizza"
      src={
        pizzaSlicesContent.find((slice) => slice.id === item.id)
          .sliceRight
      }
    />
  </p>
))}

The only problem is that the array pizzaSlicesContent has different property names, sliceUp, sliceDown, sliceLeft & sliceRight.

This can be achieved using the spread operator in JavaScript.

let newArray = teamSliderContent.map((teamSlider) => {
  return ({
    ...teamSlider,
    pizzaSlicesContent: pizzaSlicesContent
  })
})

In the above code, using the spread operator on the teamSlider object, we're creating a new JavaScript object with all the properties of teamSlider object (shallow copy) and adds the pizzaSlicesContent into it.

This function will do the trick:

/**
 * Zips and merges two object arrays
 * @param {Array<object>} a 
 * @param {Array<object>} b 
 * @returns 
 */
function mergeZip(a, b){
  return a.map((itemA, index) => ({...itemA, ...b[index]}))
}

What you want to do is zip() (that's how the function built-in for this in Python is called) and at the same time merge the two objects within both arrays.

The easiest way to zip(), assuming both arrays have the same length, is to use map(). The callback of map() provides both the item within the array which is currently looped over as well as an index. Using that index you can get the value of the second array at the same position and then use spread syntax to merge the objects together.

Here the the function used for your usecase:

const teamSliderContent = [
  {
    Describtion1: "Chef. Mordy Wenk",
    Title: "Head of the Chief staff.",
    id: 1,
  },
  {
    Describtion1: "Chef. Mark Brunnett",
    Title: "Junior chef.",
    id: 2,
  },
  {
    Describtion1: "Chef. Griffin Zach",
    Title: "a Talented Chef.",
    id: 3,
  },
  {
    Describtion1: "Chef. Will Smith",
    Title: "a Talented Chef.",
    id: 4,
  },
];

const pizzaSlicesContent = [
  {
    sliceUp:
      "https://user-images.githubusercontent.com/86873404/169595266-b0085f5c-cdd9-4f96-93b0-49edcc08fa72.png",
    id: 1,
  },
  {
    sliceLeft:
      "https://user-images.githubusercontent.com/86873404/169595240-fe7f4c80-c8c3-44f6-9cc8-4fec55587f87.png",
    id: 2,
  },
  {
    sliceDown:
      "https://user-images.githubusercontent.com/86873404/169595250-a5692462-8aec-43f8-91a8-a042d9dd35db.png",
    id: 3,
  },
  {
    sliceRight:
      "https://user-images.githubusercontent.com/86873404/169595259-e8cc76a8-437c-4260-9d53-aaefd606173b.png",
    id: 4,
  },
];

/**
 * Zips and merges two object arrays
 * @param {Array<object>} a 
 * @param {Array<object>} b 
 * @returns 
 */
function mergeZip(a, b){
  return a.map((itemA, index) => ({...itemA, ...b[index]}))
}

const result = mergeZip(teamSliderContent, pizzaSlicesContent)
console.log(result)

.as-console-wrapper { max-height: 100% !important; top: 0; }