Solid component doesn't render correctly

[geohuz]

The viteconfig.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import jsxRefresh from "@vitejs/plugin-react-refresh"
import { narrowSolidPlugin } from "@merged/react-solid/plugin"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), narrowSolidPlugin({ include: /\/src\/solid/ }), jsxRefresh({exclude: /\/src\/solid\//}) ],
})

App.jsx

import { Solid } from '@merged/react-solid'
import { Dot }  from './solid/Dot.jsx'

function App() {
  return (
      <Solid
        component={Dot}
        id={"abc"}
        x={19}
        y={5} />
  )
}

export default App

solid/Dot.jsx

import { spring } from "motion";
import { Motion } from "@motionone/solid";
import { mapScale, springConfig } from '../constants'

export function Dot(props) {
  return (
      <Motion>
        style={{
          width: '20px',
          height: '20px',
          background: "#ff6d6c",
          "border-radius": '50%'
        }}
        animate={{
          x: mapScale.width(props.x),
          y: mapScale.height(props.y)
        }}
        transition={{
          easing: spring(springConfig) 
        }}
      >
        <span>RID:{props.id}</span>
      </Motion>
  )
}

The App renders something as below:

style=[object Object]animate=[object Object]transition=[object Object]>RID:abc

anything could've been wrong?