FletでReactチュートリアルを真似る3

こちらの続きです。
FletでReactチュートリアルを真似る2 - C#ATIA

こちら相当の変更をしたつもりですが、やっぱり無理有ります。
チュートリアル：React の導入 – React

まずは、説明通りにクリックイベントを追加し、’click’の文字を出力します。
Squareクラスを修正です。

class Square(ft.UserControl):
    def build(self):
        return ft.ElevatedButton(
・・・
            on_click = self.on_click_handler,
        )

    def on_click_handler(self, e):
        print('click')

実際にボタンを押すと出力されているのでOKです。

続いて、ボタンをクリックすると"X"になるように修正です。
Squareクラスのon_click_handlerを修正です。

class Square(ft.UserControl):
・・・
    def on_click_handler(self, e):
        e.control.text = 'X'
        self.update()

updateしないと反映されない事はドキュメントに記載されていました。

実際にクリックすると"X"が表示されます。

が、中身は明らかに説明と違います。

と、ここで行き詰まっています。（それは最初から薄々感じてた）

取りあえず、出し忘れている部分もあるので。

#python
import flet as ft

class Square(ft.UserControl):
    def build(self):
        return ft.ElevatedButton(
            '',
            width = 30,
            height = 30,
            bgcolor = ft.colors.BLUE_100,
            style = ft.ButtonStyle(
                shape=ft.RoundedRectangleBorder(radius=0),
                padding = 1,
            ),
            on_click = self.on_click_handler,
        )

    def on_click_handler(self, e):
        e.control.text = 'X'
        self.update()


class Board(ft.UserControl):
    def renderSquare(self, i):
        return Square() 

    def build(self):
        return ft.Column(
            controls = [
                ft.Text(
                    'Next player: X'
                ),
                ft.Row(
                    controls=[
                        self.renderSquare(0),
                        self.renderSquare(1),
                        self.renderSquare(2),
                    ]
                ),
                ft.Row(
                    controls=[
                        self.renderSquare(3),
                        self.renderSquare(4),
                        self.renderSquare(5),
                    ]
                ),
                ft.Row(
                    controls=[
                        self.renderSquare(6),
                        self.renderSquare(7),
                        self.renderSquare(8),
                    ]
                ),
            ]
        )


class Game(ft.UserControl):
    def build(self):
        todo = ft.ListView()

        return ft.Column(
            width=100,
            controls = [
                Board(),
                ft.Text(''),
                todo,
            ]
        )


def main(page: ft.Page):
    set_page(page)

    page.add(
        Game()
    )

    page.update()


def set_page(page: ft.Page):
    page.window_width = 400
    page.window_height = 400
    page.window_left = 100
    page.window_top = 100
    page.horizontal_alignment = "center"

    page.theme_mode = ft.ThemeMode.LIGHT


ft.app(target=main)