Fyne List widget doesn't display items correctly

I'm trying to display the alphabet in a listwithdata widget. I am using a custom clickable label as the widget to display in the list.
For some reason everything displays fine when the widget loads. But when I start scrolling the letters starts being displayed in a completely random order and I cant figure out why.
Here is a fully working code to reproduce the bug.

package main

import (
	"fmt"

	"fyne.io/fyne/v2"
	"fyne.io/fyne/v2/app"
	"fyne.io/fyne/v2/data/binding"
	"fyne.io/fyne/v2/widget"
)

func makeAlphabet() []string {
	var alphabet []string
	for ch := 'A'; ch <= 'Z'; ch++ {
		alphabet = append(alphabet, string(ch))
	}
	return alphabet
}

type TapLabel struct {
	*widget.Label //composition

	//function pointers to set to get events
	OnTapped func(string)
}

func (mc *TapLabel) Tapped(pe *fyne.PointEvent) {
	if mc.OnTapped != nil {
		mc.OnTapped(mc.Text)
	}
}

func NewTapLabel(text string, tappedLeft func(string)) *TapLabel {
	return &TapLabel{widget.NewLabel(text), tappedLeft}
}

func alphabetToBrands(letter string) {
	fmt.Println(letter)
}

func main() {
	app := app.New()
	window := app.NewWindow("tac_hub")
	window.Resize(fyne.NewSize(200,200))

	rawData := makeAlphabet()
	data := binding.BindStringList(&rawData)
	list := widget.NewListWithData(
		data,
		func() fyne.CanvasObject {
			return NewTapLabel("template", alphabetToBrands)
		},
		func(i binding.DataItem, o fyne.CanvasObject) {
			o.(*TapLabel).Bind(i.(binding.String))
		},
	)

	window.SetContent(list)
	window.ShowAndRun()
}

The click action works correctly and gives me the correct letter (not the one that is displayed but the one that should be displayed).
I'm guessing I must be doing something wrong somewhere but I can't figure out what.

If anyone can help it would be appreciated!

Solution with custom widget:

This is based on Fyne Extending Widgets tutorial. In particular you call ExtendBaseWidget:

> ExtendBaseWidget is used by an extending widget to make use of BaseWidget functionality.

You still embed widget.Label, but not as a pointer (using a pointer also works, but the documentation uses the non-pointer example), so that the necessary methods are promoted into your widget:

func NewTapLabel(text string, tappedLeft func(string)) *TapLabel {
    label := &TapLabel{}
    label.ExtendBaseWidget(label)
    label.SetText(text)
    label.OnTapped = tappedLeft
    return label
}

And then you change the update function to set the actual bound string to the label, instead of just binding the data again as in your original example:

        func(i binding.DataItem, o fyne.CanvasObject) {
            s, _ := i.(binding.String).Get()
            o.(*TapLabel).SetText(s)
        },

As of why the bug occurs if you omit calling ExtendBaseWidget, I suspect it's because it was missing the base widget implementation, which this method sets.

<hr>

Solution without custom widget:

    list := widget.NewListWithData(
        data,
        func() fyne.CanvasObject {
            return &widget.Label{Text: "template"}
        },
        func(i binding.DataItem, o fyne.CanvasObject) {
            o.(*widget.Label).Bind(i.(binding.String))
        },
    )
    list.OnSelected = func(id widget.ListItemID) {
        fmt.Println(rawData[id])
    }

Dropping your custom TapLabel in favor of &widget.Label{Text: "template"}, then to print the tapped item you use list.OnSelected and close around the data slice.

Looks like the argument here o.(*TapLabel).Bind(i.(binding.String)) changes as the scroll action happens. Add a log to observe the i.(binding.String) value in that function as you scroll

Take a look at this: list example

As far as I can see the constructor for the custom widget did not call ExtendBaseWidget which is required for rendering to work correctly. I think that answers @blackgreen question too.

You should not embed other widgets using their constructor as noted in the accepted answer.