I have a map that I want to overlay precipitation data from the MetOffice on, but it's repeating the same overlay infinitely:

Here's the code I'm using:

<template>
  <div id="map" style="height: 75vh; width: 50vw;">
    <l-map
        v-model:zoom="zoom"
        :center="[54.5, -4]"
    >
      <l-tile-layer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      ></l-tile-layer>
      <l-tile-layer :url="rainLayer.url"></l-tile-layer>
    </l-map>
  </div>
</template>

<script>
import {
  LMap,
  LTileLayer
} from "@vue-leaflet/vue-leaflet";
import "leaflet/dist/leaflet.css";

export default {
  components: {
    LMap,
    LTileLayer
  },
  data() {
    return {
      zoom: 5.7,
      rainLayer: {
        url: 'http://datapoint.metoffice.gov.uk/public/data/layer/wxfcs/Precipitation_Rate/png?RUN=2021-10-14T09:00:00Z&FORECAST=3&key={removed}'
      }
    };
  }
};
</script>

This is where I'm getting the data from: https://www.metoffice.gov.uk/services/data/datapoint/inspire-layers-detailed-documentation Could it have something to do with the projection system?