JSONForms Vue Basic String Custom Renderer

So I'm starting out with Vue JSONForms and I'm trying to create a bare-bones custom text renderer. I know there JSONForms has the vue-vanilla package, but I want to understand what are the basics needed for a custom renderer because later on I will need to do much more customization to each custom renderer I create. Here is what I have so far:

<template>
    <v-input />
</template>

<script lang="ts">
import { ControlElement, JsonFormsRendererRegistryEntry, rankWith, isStringControl } from '@jsonforms/core'
import { useJsonFormsControl, RendererProps } from '@jsonforms/vue'
import { defineComponent } from 'vue'

const renderersText = defineComponent({
    name: 'renderers-text',
    setup (props: RendererProps<ControlElement>) {
        return useJsonFormsControl(props)
    },
})

export default renderersText

export const entry: JsonFormsRendererRegistryEntry = {
    renderer: renderersText,
    tester: rankWith(1, isStringControl),
}
</script>

But I'm getting a r.tester is not a function error. Any idea what this means and/or what I need to fix? Thanks in advance!

In the jsonforms vue template, renderers are added like so

const renderers = Object.freeze([
    ...vanillaRenderers,
    // here you can add custom renderers
])

The vanillaRenderers collection (typed as any[]) is actually a collection of JsonFormsRendererRegistryEntry objects. The error r.tester is not a function occurs if you add a renderer object to the collection, e.g.

const renderers = Object.freeze([
    ...vanillaRenderers,
    renderersText,
])

Instead make sure to add a JsonFormsRendererRegistryEntry object, which you can define in full

const renderers = [
  ...vanillaRenderers,
  {
    tester: rankWith(
      1,
      isStringControl,
    ),
    renderer: renderersText,
  }
];