Vue.js3でag-grid-vueで作成したコンポーネントをレンダリングする方法がわからなくて困っています。

通常ならコンポーネントをtemplate: <div>test</div>のように、そのままレンダリングできますが、ag-grid-vueで作成したコンポーネントにはレンダリング機能がないため、

何かVue.jsでレンダリングする方法が必要という部分までわかってはいるのですが、

もしわかるかたいらっしゃいましたら、ご教授お願いします。

ag-Gridの公式サイト手順は以下のようになっています。
https://www.ag-grid.com/vue-grid/vue3/

ag-Gridの公式サイトからstackblitzへのリンク先(Vue.js 2の手順にはなっている。)
https://stackblitz.com/edit/ag-grid-vue-hello-world

html中は、親の<div id="app">、その中にテンプレートのタグ<test>を入れる必要があります。
※今までVanillaタイプのag-Gridを使用していましたが、ag-grid-vueを使う必要が出てきました。

html
1<html>
2    <head>
3        <!-- ローカルで読み込んでいる方法 -->
4        <link rel="stylesheet" href="~/lib/ag-grid/styles/ag-grid.css" />
5        <link rel="stylesheet" href="~/lib/ag-grid/styles/ag-theme-balham.css" />
6        <script src="~/lib/ag-grid/ag-grid-community.js"></script>
7        <script src="~/lib/ag-grid-vue3/dist/ag-grid-vue3.umd.js"></script>
8
9<!-- 直接読む場合、unpkgは直接読めないと思いますが、urlを記載します。
10        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/24.1.0/styles/ag-grid.min.css" />
11        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/24.1.0/styles/ag-theme-balham.css" />
12        <script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/24.1.0/ag-grid-community.js"></script>
13        <script src="https://unpkg.com/browse/ag-grid-vue3@24.1.1/dist/ag-grid-vue3.umd.js"></script>
14-->
15   </head>
16    <body>
17        <div id="app">
18            <test></test>
19        </div>
20    </body>
21</html>

javascirpt
1// Moduleをインポートする方法がうまくできなかったため、constで対応しました。exportも利用できる環境ではありません。
2const AgGridVue = window["ag-grid-vue3"];
3// この行はいらないかも？ const AgGridAllCommunityModules = window["agGrid"].AllCommunityModules;
4
5const app = Vue.createApp({
6    // 本体のApp
7});
8
9app.component = ("test", {
10    data() {
11        return {
12            columnDefs: null,
13            rowData: null
14            // この行はいらないかも？ modules: AgGridAllCommunityModules
15        }
16    },
17
18    components: {
19        AgGridVue
20    },
21
22    beforeMount() {
23        this.columnDefs = [
24            { field: 'make' },
25            { field: 'model' },
26            { field: 'price' }
27        ];
28
29        this.rowData = [
30            { make: 'Toyota', model: 'Celica', price: 35000 }
31        ];
32
33    },
34   
35    // これは表示できました。
36    // template: `<div>test</div>`
37    
38    // コンポーネントにはレンダリング機能がないため、これを使うとエラーした。
39    template: `
40        <ag-grid-vue
41            style="width: 500px; height: 300px;"
42            class="ag-theme-balham"
43            :columnDefs="columnDefs"
44            :rowData="rowData">
45        </ag-grid-vue>
46    `
47});
48
49app.mount("#app");

表示しているエラー

Console
1[Vue warn]: Component is missing template or render function. 
2  at <AgGridVue style= Object class="ag-theme-balham" columnDefs= Array(3)  ... > 
3  at <Test> 
4  at <App>