Problem adding an icon to each input with a certain attribute

[SuddenDev]

So I've been trying to wrap my head around adding an info Icon in the label of each input with a label and a "floatingHelp" attribute (for a tooltip).

I've started of with the example of how to add an astrerix to the label if required and how to get the icon in with the other example.
So far it works well enough, but now as I also want to manipulate the options of radio / checkbox inputs, it only works either for the label / legend input or it breaks the functionality of the input field. All the option inputs have their own name / value and the radio buttons are all selected. I also recieve a W350 warning if that helps, but I couldn't figure out what that means.

Here's my formkit.config.js

import { de, en } from "@formkit/i18n";
import { createAutoAnimatePlugin } from "@formkit/addons";
import { plugin as inertiaPlugin } from "formkit-addon-inertia";

import PhInfo from "~icons/ph/info?raw";
// ...

const formKitConfig = {
    locales: { de, en },
    locale: "de", // default
    icons: {},
    plugins: [createAutoAnimatePlugin(), inertiaPlugin, labelEnhancementPlugin],
};

export default formKitConfig;

/**
 * Start Part of the label enhancement plugin
 */
const isCheckboxAndRadioMultiple = (node) =>
    (node.props.type === "checkbox" || node.props.type === "radio") &&
    node.props.options;

const updateLabel = (node) => {
    const isMultiOption = isCheckboxAndRadioMultiple(node);
    const floatingHelpText = node.props.attrs["floatingHelp"];
    const isRequired = node.props.parsedRules.some(
        (rule) => rule.name === "required"
    );

    // if we're going to modify the schema then we need
    // to update the schemaMemoKey so we don't get an
    // invalid cached schema.
    node.props.definition.schemaMemoKey = `required_${
        isMultiOption ? "multi_" : ""
    }${floatingHelpText ? "info_" : ""}${node.props.definition.schemaMemoKey}`;

    // no idea why we need to set this like this, but it works.
    node.context.isReq = isRequired ? "*" : " ";
    node.context.infoIcon = floatingHelpText
        ? `<div class="info-btn" data-tippy-content="${floatingHelpText}">${PhInfo}</div>`
        : "";

    const schemaFn = node.props.definition.schema;
    node.props.definition.schema = (sectionsSchema = {}) => {

        const labelSchema = {
            attrs: {
                innerHTML: '$label + "" + $isReq + "" + $infoIcon',
            },
            children: null,
        };
        const optionsSchema = {
            for: ["item", "index", "$options"],
            children: [
                {
                    $cmp: "FormKit",
                    props: {
                        name: "$item.name",
                        type: node.props.type,
                        label: "$item.label",
                        floatingHelp: "$item.attrs.floatingHelp",
                    },
                },
            ],
        };

        const localeSchema = {
            ...sectionsSchema,
            [isMultiOption ? "legend" : "label"]: labelSchema,
            children: null,
            options: isMultiOption ? optionsSchema : null,
        };

        return schemaFn(localeSchema);
    };
};

// modifies label (info icon and asteriks)
function labelEnhancementPlugin(node) {
    node.on("created", () => {
        updateLabel(node);
    });

    node.on("prop", ({ payload }) => {
        if (payload.prop === "attrs" || payload.prop === "locale")
            updateLabel(node);
    });
}

I run the function twice, because my data (JSON data) comes from the backend and so I don't have it on create always.
Can someone help me?

Thanks and cheers!