Compare values of two objects using nested for loops and return an array of modified objects

I have two arrays of objects:

const testArr1 = [
      {
        event: "Ryan's birthday",
        time: "4:00",
      },
      {
        event: "Steves's birthday",
        time: "2:00",
      },
      {
        event: "Helen's birthday",
        time: "1:00",
      },
      {
        event: "Paola's birthday",
        time: "3:00",
      },
      {
        event: "Jared's birthday",
        time: "9:00",
      },
    ];

and

const testArr2 = [
      {
        time: "4:00",
        temp: 41,
      },
      {
        time: "6:00",
        temp: 42,
      },
      {
        time: "8:00",
        temp: 43,
      },
      {
        time: "1:00",
        temp: 44,
      },
      {
        time: "3:00",
        temp: 45,
      },
      {
        time: "9:00",
        temp: 46,
      },
    ];

I would like to create a function that takes these two arrays of objects and returns a new array of objects called dataToDisplay. dataToDisplay should contain objects related to events.

I want the function getDataToDisplay to see if an event has temperature data available by comparing testArr1 and testArr2 values at the time key, and then give me an array of objects that either have pertinent temp data when time values match, or have no matching data found noted when time values do not match.

My problem is that, using the function as I've built it now, an object is getting pushed to dataToDisplay in every iteration that returns false when comparing the time values, so there is a lot of duplicate data.

Here is the function:

const getDataToDisplay = (testArr1, testArr2) => {
  const dataToDisplay = [];

  for (let i = 0; i < testArr1.length; i++) {
    for (let j = 0; j < testArr2.length; j++) {
      let objToPush = {};

      //if times in both objects are equal, push an object containing event, time, and temp value at that time to dataToDisplay
      //break and move on if times are equal
      if (testArr1[i].time === testArr2[j].time) {
        Object.assign(objToPush, {
          event: testArr1[i].event,
          time: testArr1[i].time,
          temp: testArr2[j].temp,
        });
        dataToDisplay.push(objToPush);
        break;
      } else {
        //if times in both objects are NOT equal, push an object containing event, time, and a temp value of "no matching data found"
        Object.assign(objToPush, {
          event: testArr1[i].event,
          time: testArr1[i].time,
          temp: "no matching data found",
        });
        //this is pushing an object every time the condition returns false
        //I only want one object returned if false
        dataToDisplay.push(objToPush);
      }
    }
  }
  return dataToDisplay;
};

here is what happens when the function is called

console.log(getDataToDisplay(testArr1, testArr2));
    //logs
    //     [
    //   {
    //     "event": "Ryan's birthday",
    //     "time": "4:00",
    //     "temperature": 41
    //   },
    //   {
    //     "event": "Steves's birthday",
    //     "time": "2:00",
    //     "temperature": "no matching data found"
    //   },
    //   {
    //     "event": "Steves's birthday",
    //     "time": "2:00",
    //     "temperature": "no matching data found"
    //   },
    //   {
    //     "event": "Steves's birthday",
    //     "time": "2:00",
    //     "temperature": "no matching data found"
    //   }
    //   ...
    // ]

    //but I want it to log something like this
    // [
    //   {
    //     event: "Ryan's birthday",
    //     time: "4:00",
    //     temperature: 41,
    //   },
    //   {
    //     event: "Steves's birthday",
    //     time: "2:00",
    //     temperature: "no matching data found",
    //   },
    //   {
    //     event: "Helen's birthday",
    //     time: "1:00",
    //     temperature: 44,
    //   },
    //   ...
    // ];

How do I just return one new modified object per event, rather than the result of every one of the comparisons? I feel like I'm so close!