RenderLit.ts

import { useEffect, useRef } from 'react'

import { render } from 'lit-html'

export const RenderLit = ({ html }) => {
  const container = useRef(null)

  useEffect(() => {
    const element = container.current
    if (element) {
      render(html, element)
    }
  }, [html])

  return <div ref={container}></div>
}

usage.ts

const Usage = () => {

  const boolean = true
  const callback = ()=>{}

  return <RenderLit
    html={html`<my-web-component
      ?boolean=${boolean}
      .callback=${callback}
    ></set-password-input>`}
  />
}