Adding a layerGroup to a custom Leaflet Pane

I have a codepen demonstrating the problem at https://codepen.io/ericg_off/pen/rNvagdd

According to the Working with map panes, I should be able to create a custom pane, set the z-index of that pane. According to the documentation for layerGroup, I should be able to create a new layerGroup and pass in the pane option to have it added to my custom pane.

However, this is not working. The HTML generated shows polyline added to overlay pane when it should be in my custom pane ( my-pane )

The resulting image looks like:

The yellow line should be drawn below the black line.

What do I need to change so this will work as expected? Or have I misunderstood something about how custom panes work?

HTML

<div id="map"></div>

CSS

#map {
  height: 100vh;
}

JS

const map = L.map("map", {
  center: [57, -19],
  zoom: 5
});

const tiles = new L.tileLayer(
  "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
  {
    minZoom: 3,
    maxZoom: 8
  }
).addTo(map);

map.createPane("my-pane");

const myPane = map.getPane("my-pane");
myPane.style.zIndex = 350;
const yellowGroup = L.layerGroup({ pane: "my-pane" }).addTo(map);

L.polyline(
  [
    [57, -19],
    [60, -12]
  ],
  { weight: 20, color: "black", lineCap: "butt" }
).addTo(map);

L.polyline(
  [
    [57, -19],
    [60, -12]
  ],
  { weight: 5, color: "yellow", lineCap: "butt" }
).addTo(yellowGroup);