How to use a custom renderer for the grid-tree-column

I am trying already for some time to get my custom renenderer working for the grid-tree-column. For the grid-sort-column it worked. Here is my current code. What are I am doing wrong?

_renderEndpointGrid() {
        if (this._endpoints) {
            return html`
                <vaadin-grid .dataProvider="${this._dataProvider}"
                             class="datatable" theme="row-stripes">
                    <vaadin-grid-tree-column header="Class Name"
                                             resizable
                                             ${columnBodyRenderer(this._beanRenderer, [])}
                                             auto-width></vaadin-grid-tree-column>
                    <vaadin-grid-sort-column header="Access Annotations" resizable
                                             ${columnBodyRenderer(this._accessAnnotationsRenderer, [])}
                                             auto-width></vaadin-grid-sort-column>
                </vaadin-grid>`;
        }
    }

    _dataProvider(params, callback) {
        if (params.parentItem) {
            const children = params.parentItem.children || [];
            callback(children, children.length);
        } else {
            callback(endpoints, endpoints.length);
        }
    }

    _beanTreeRenderer(root, column, model) {
        root.appendChild(this._beanRenderer(model.item));
    }

    _beanRenderer(bean) {
        return html`
            <vaadin-vertical-layout>
                <code class="annotation">@${bean.endpointAnnotation}</code>
                <qui-ide-link fileName='${bean.providerName}'
                              lineNumber=0><code>${bean.name}</code></qui-ide-link>
            </vaadin-vertical-layout>`;
    }