Re-rendering with a custom render function

export const getRootContainer = () =>
    new Promise((resolve) => {
        const checkInterval = setInterval(() => {
            const rootContainerParent = document.querySelector("._2-F7v")
            if (rootContainerParent) {
                clearInterval(checkInterval)
                resolve(rootContainerParent)
            }
        }, 10)
    });

// Use this to optimize unmount lookups
export const getShadowHostId = () => "better-input";

// Override render to directly place custom component without parent
export const render: PlasmoRender = async ({
                                               // anchor, // the observed anchor, OR document.body.
                                               createRootContainer // This creates the default root container
                                           }) => {
    const rootContainer = await createRootContainer()

    const root = createRoot(rootContainer) // Any root
    root.render(
        <BetterInput/>
    )
}

const BetterInput = () => {
    return (
        <input
            className="better-input"
            placeholder="Type here..."
        >
        </input>
    )
};