Working my way through an Object

JavaScript
5

So, I got a little ahead of myself.

Before I could tackle the problem I posted about, I had to take a step back and get my data to look like this in the first place:

    {
      "Recipe1": [
        "water",
        //a bunch more ingredients
      ],
      "Recipe2": [
        "EVOO",
        //a bunch more ingredients
      ]
    }

I have almost got it but I think I am getting stuck in map() and for...loops and over-writing my results so instead of ending up with data as in the format above, I am ending up with only the FINAL object value. So in the case above, the final result is:

{
"Recipe2": [
        "EVOO",
        //a bunch more ingredients
      ]
    }

This is obviously incomplete but I am not sure where in my loops I am over-writing. Can someone take a look?

Code is here: https://codesandbox.io/s/wash-po-recipes-bqx4j?fontsize=14
Component: readData.jsx
Event: buildRecipeObject()

Goal of this event:

//Starting point - each element of array looks like this:
    //{title: "Polenta With Balsamic Scallion Greens",
    // Link: "Polenta With Balsamic Scallion Greens",
    // ingredient1: "water",
    // ingredient2: "kosher salt",
    // ...}

    // Final result has to look like this:
    // {
    //   "RecipeNumber1": ["ingredient1", ...],
    //   "RecipeNumber2": ["ingredient1", ...],
    //   ....
    // }

Thank you.