Directus custom layout extension

I'm using Directus 11.7.2

and trying to run the simple layout extension from the documentation

https://docs.directus.io/guides/extensions/layouts-getting-started.html

index.js:

import { toRefs } from 'vue';
import { useItems, useCollection } from '@directus/extensions-sdk';
import LayoutComponent from './layout.vue';

export default {
    id: 'my-custom-layout',
    name: 'Custom Layout',
    icon: 'box',
    component: LayoutComponent,
    slots: {
        options: () => null,
        sidebar: () => null,
        actions: () => null,
    },
    setup(props) {
        const { collection, filter, search } = toRefs(props);
        const { info, primaryKeyField, fields: fieldsInCollection } = useCollection(collection);

        const { items, loading, error } = useItems(collection, {
            sort: primaryKeyField.field,
            limit: '-1',
            fields: '*',
            filter,
            search,
        });

        return {
            info,
            primaryKeyField,
            items,
            loading,
            filter,
            search,
            fieldsInCollection,
            error,
        };
    },
};

layout.vue:

<template>
  <div v-if="!loading">
    <p>Collection: {{ collection }}</p>

    <table>
      <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>&nbsp;</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.email }}</td>
        <td><a :href="`/admin/content/${collection}/${item.id}`">View Details</a></td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    collection: {
      type: String,
      required: true,
    },
    items: Array,
    loading: Boolean,
    error: Array,
    search: {
      type: String,
      default: null,
    },
  }
};
</script>

it loads data in the table as expected, but when I try to type something in search input in the header, it says error in console: TypeError: Cannot set properties of undefined (setting 'value')

Do I need to change something for search prop?