Workout App Leaflet - Workout Weather not updating when form submitted

Question

I am making a workout application in the browser using the Leaflet map library.

The problem arises when I create a workout. For the first workout made, the user enters the form and submits but nothing shows up. When the user enters more workouts, the previous one is only shown when the current workout is entered. However, the current workout is not visible on the map or in the left toolbar. Additionally, the workout weather data is sometimes just displaying as a default "34.6F", even though that workout location does not have that weather data. Is this an issue with the API or my code?

(I would greatly appreciate a response to the first, more important issue, and if you have time then the second API bug would be nice to resolve as well.)

Relevant code to create a workout using insertAdjacentHTML:

  _renderWorkout(workout) {
    let html = ``;
    let faren = ``;
    this.#map.on('dblclick', async ev => {
      try {
        let latlng = ev.latlng;
        faren = await this._getFetchLocation(latlng.lat, latlng.lng);
        updateHTML();
        console.log('DONE UPDATING');
      } catch (error) {
        console.error(error);
      }
    });
    const updateHTML = () => {
      html = `
      <li class="workout workout--${workout.type}" data-id="${workout.id}">
        <h2 class="workout__title">${workout.description}</h2>
        <div class="workout__details">
        <button class="delete__workout">Delete this workout</button>
          <button class="edit__workout">Edit your workout</button>
          <span class="workout__icon">${
            workout.type === 'running' ? '‍♂️' : '‍♀️'
          }</span>
          <span class="workout__value">${workout.distance}</span>
          <span class="workout__weather">${faren}F</span>
          <span class="workout__unit">km</span>
        </div>
        <div class="workout__details">
          <span class="workout__icon">⏱</span>
          <span class="workout__value">${workout.duration}</span>
          <span class="workout__unit">min</span>
        </div>
    `;

      if (workout.type === 'running') {
        html += `
        <div class="workout__details">
          <span class="workout__icon">⚡️</span>
          <span class="workout__value">${workout.pace.toFixed(1)}</span>
          <span class="workout__unit">km/min</span>
        </div>
        <div class="workout__details">
          <span class="workout__icon"></span>
          <span class="workout__value">${workout.cadence}</span>
          <span class="workout__unit">spm</span>
        </div>
      </li>
      `;
      }

      if (workout.type === 'cycling') {
        html += `
        <div class="workout__details">
          <span class="workout__icon">⚡️</span>
          <span class="workout__value">${workout.speed.toFixed(1)}</span>
          <span class="workout__unit">km/h</span>
        </div>
        <div class="workout__details">
          <span class="workout__icon">⛰</span>
          <span class="workout__value">${workout.elevation}</span>
          <span class="workout__unit">m</span>
        </div>
      </li>
      `;
      }
      form.insertAdjacentHTML('afterend', html);
    };
    this._setLocalStorage();
  }

Here is my codepen: https://codepen.io/deepblue6/pen/zYeWqXp