When using createVNode, the data in props changes and the component does not update

[xyz-zz]

I have a simple example that looks like this:

src/components/SyncInput/SyncInput.vue

<script setup>
import { ref, defineProps, computed } from "vue";

const inputStr = ref('');

const props = defineProps({
  propsStr: {
    type: String,
  }
})

const emits = defineEmits(['update:propsStr'])

const currentPropsStr = computed({
  get() {
    return props.propsStr;
  },
  set(val) {
    emits('update:propsStr', val);
  }
})
</script>

<template>
 <div class="">
   <input type="text" v-model="currentPropsStr" />
   <p>
     {{ currentPropsStr }}
   </p>
 </div>
</template>

And attached a modular call package
src/components/SyncInput/index.js

import { createVNode, reactive, render } from "vue";

import SyncInput from "@/components/SyncInput/SyncInput.vue";

export default function() {
    const renderNode = document.createElement("div");
    document.body.appendChild(renderNode);

    const state = reactive({
        propsStr: ''
    })
    const inputVNode = createVNode(SyncInput, {
        propsStr: state.propsStr,
        'onUpdate:propsStr': (propsStr) => {
            console.log('', propsStr);
            state.propsStr = propsStr;
            console.log(state.propsStr);
        }
    });

    render(inputVNode, renderNode)
}

In App.vue

<script setup>

import syncInput from "@/components/SyncInput/index.js";

function startTest() {
  syncInput();
}

</script>

<template>
  <main>
    <button @click="startTest">
      Load SyncInput
    </button>
  </main>
</template>

But when I enter text in the input , it does not display in the P tag below,

What I mean is that when I create a component using createVNode, the data in the props changes, and the component cannot track it, and there is no way to synchronize the changes to the interface. Am I missing something?