How to put a caption inside an L.Control Layer Leaflet?

Question

I'm separating in an option box to choose Temperature, Humidity and Rain for an area, to be able to switch between them and see this color in the polygon, but I can't put a caption inside each object and display it along with the layer.

  const Temp = {
  Temperature: L.polygon(
    historical.map((item) =>
      item.bounds.map((item: any) => [item[1], item[0]]),
    ),
    {
      color: '#ff7f2f',
      fillColor: getColorTemp(
        historical.map((item) => item.data.temperature || 0)[0],
      ),
      fillOpacity: 0.5,
    },
  )
    .on('click', () => {
      info.onAdd = () => {
        const div = L.DomUtil.create('div', 'info')
        historical.forEach((item) => {
          div.innerHTML = `
          <h3 class="h5 mb-0">
            ${item.name} <small>(${item.blockId})</small>
          </h3>
          <ul class="list-unstyled mb-0">
            <li>
              <b>Temperatura:</b> ${Math.round(item.data.temperature)}${
            dataUnit.temperature
          }
            </li>
             `
        })
        return div
      }
      info.addTo(map)
    })

    .on('mouseout', () => {
      info.remove()
    }),
}

const Humidity = {
  Humidity: L.polygon(
    historical.map((item) =>
      item.bounds.map((item: any) => [item[1], item[0]]),
    ),
    {
      color: '#ff7f2f',
      fillColor: getColorHum(
        historical.map((item) => item.data.relativeHumidity || 0)[0],
      ),
      fillOpacity: 0.5,
    },
  )
    .on('click', () => {
      info.onAdd = () => {
        const div = L.DomUtil.create('div', 'info')
        historical.forEach((item) => {
          div.innerHTML = `
        <h3 class="h5 mb-0">
          ${item.name} <small>(${item.blockId})</small>
        </h3>
        <ul class="list-unstyled mb-0">
          <li>
            <b>Temperatura:</b> ${Math.round(item.data.relativeHumidity)}${
            dataUnit.relativeHumidity
          }
          </li>
           `
        })
        return div
      }
      info.addTo(map)
    })

    .on('mouseout', () => {
      info.remove()
    }),
}
const Rain = {
  Rain: L.polygon(
    historical.map((item) =>
      item.bounds.map((item: any) => [item[1], item[0]]),
    ),
    {
      color: '#ff7f2f',
      fillColor: getColorRain(
        historical.map((item) => item.data.rain || 0)[0],
      ),
      fillOpacity: 0.5,
    },
  )
    .on('click', () => {
      info.onAdd = () => {
        const div = L.DomUtil.create('div', 'info')
        historical.forEach((item) => {
          div.innerHTML = `
      <h3 class="h5 mb-0">
        ${item.name} <small>(${item.blockId})</small>
      </h3>
      <ul class="list-unstyled mb-0">
        <li>
          <b>Temperatura:</b> ${Math.round(item.data.rain)}${dataUnit.rain}
        </li>
         `
        })
        return div
      }
      info.addTo(map)
    })

    .on('mouseout', () => {
      info.remove()
    }),

  Legend: (legend.onAdd = () => {
    const div = L.DomUtil.create('div', 'info legend')
    const grades = [0, 5, 10, 15, 20, 25, 30]
    const gradesHum = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
    const gradesRain = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60]
    const labels = []
    const labelsHum = []
    const labelsRain = []

    // loop through our density intervals and generate a label with a colored square for each interval
    for (let i = 0; i < grades.length; i++) {
      div.innerHTML += `
      <i style="background:${getColorTemp(grades[i] + 1)}"></i> ${
        grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] : '+')
      }${dataUnit.temperature}<br>`
    }
    for (let i = 0; i < gradesHum.length; i++) {
      div.innerHTML += `
      <i style="background:${getColorHum(gradesHum[i] + 1)}"></i> ${
        gradesHum[i] +
        (gradesHum[i + 1] ? '&ndash;' + gradesHum[i + 1] : '+')
      }${dataUnit.relativeHumidity}<br>`
    }
    for (let i = 0; i < gradesRain.length; i++) {
      div.innerHTML += `
      <i style="background:${getColorRain(gradesRain[i] + 1)}"></i> ${
        gradesRain[i] +
        (gradesRain[i + 1] ? '&ndash;' + gradesRain[i + 1] : '+')
      }${dataUnit.rain}<br>`
    }
    return div
  }),
}

L.control
  .layers({
    Temperatura: Temp.Temperature,
    Umidade: Humidity.Humidity,
    Chuva: Rain.Rain,
    legend: Rain.Legend,
  })
  .addTo(map)

I already implemented the checkbox and I already have them, but how can I put the legend inside L.control.layers?