custom component not visible in basic group

[rajkumarrathod404]

Describe the bug A clear and concise description of what the bug is. dependencies : "@formio/js": "5.0.0-dev.5621.91bd945", "@formio/react": "6.0.0-dev.568.ced0fbd",

To Reproduce Steps to reproduce the behavior:

1. add custom component :

   
   value,
   onChange,
   labels,
   }: {
   value: string;
   onChange: (value: string) => void;
   labels: { label: string; value: string }[]; // Accept label and value pairs
   }) => {
   return `
       <div class="custom-checkbox-component">
           ${labels
             .map(
               (item) => `
               <label>
                   <input 
                       type="checkbox" 
                       checked="${value === item.value}" 
                       onChange="javascript:(${onChange})('${item.value}')" 
                   />
                   ${item.label}
               </label>
           `
             )
             .join("")}
       </div>
   `;
   }```

2. register custom component :

   
   import SingleChoiceQnRender from "../renderComponents/singleChoiceQnRender";

// Register the custom component with Form.io Components.addComponent("customcomponent", SingleChoiceQnRender);

3. render component : 
```import { Components } from "formiojs";
const FieldComponent = Components.components.field;
import { getSingleChoiceQn } from "../customComponents/getSingleChoiceQn";

class SingleChoiceQnRender extends FieldComponent {
  // Define the schema for the custom component
  static schema(...extend) {
    return FieldComponent.schema({
      type: "customcomponent", // The type identifier for this component
      key: "customComponent",
      inputType: "select",
      input: true,
      data: {
        values: [
          { label: "Yes", value: "yes" },
          { label: "No", value: "no" },
        ],
        options: [],
      },
      ...extend,
    });
  }

  // Define the information for the builder (drag and drop interface)
  static get builderInfo() {
    return {
      title: "Single Choice Question",
      group: "basic", // The group under which the component appears
      icon: "fa fa-toggle-on", // Icon for the component in the builder
      weight: 0, // Position in the list
      schema: SingleChoiceQnRender.schema(),
    };
  }

  // Render the select dropdown with "Yes" and "No" options
  render() {
    const labels = this.component.data.values; // Get the labels from the schema

    const SingleChoiceQnHtml = getSingleChoiceQn({
      value: this.dataValue,
      onChange: (event) => this.updateValue(event.target.value),
      labels: labels,
    });

    return super.render(SingleChoiceQnHtml);
  }

  // Attach event listeners to the select input
  attach(element) {
    this.loadRefs(element, { input: "single" });
    if (this.refs.input) {
      this.refs.input.addEventListener("change", (event) => {
        this.updateValue(event.target.value);
      });
    }
    return super.attach(element);
  }

  get defaultSchema() {
    return SingleChoiceQnRender.schema();
  }
}

export default SingleChoiceQnRender

4. form builder

   
   import "formiojs/dist/formio.full.css";
   import { useState } from "react";
   // import ReactJson from "@microlink/react-json-view";
   import "../../../../../../src/form-builder/style/Builder.css";
   import "bootstrap/dist/css/bootstrap.min.css";
   import CustomTitle from "../../../../../components/app/CustomTitle";
   import { ScrollArea } from "../../../../../components/ScrollBar";
   import "../../../../../form-builder/registerComponent/registerCustomComponents.js";

const Builder = () => { const [schema, setSchema] = useState({ display: "form", components: [ { type: "button", action: "submit", label: "Submit", input: true, key: "submit", },

],

});

const onFormChange = (schema: any) => { setSchema(schema); };

return (

{/* */} preview

); }; export default Builder;

const formConfig = { components: [], };

**Expected behavior**
custom single select component should visible in the basic group components

**Screenshots**
![image](https://github.com/user-attachments/assets/47603b1e-575c-4c3f-b54d-773d9f688780)

**Desktop (please complete the following information):**

-   OS: [linux]
-   Browser [firefox]
-   Version [22.0 lts]

**Smartphone (please complete the following information):**

-   Device: [e.g. iPhone6]
-   OS: [e.g. iOS8.1]
-   Browser [e.g. stock browser, safari]
-   Version [e.g. 22]

**Additional context**
how we can add custom component in groups 

[lane-formio]

Can you provide a code sandbox to help us reproduce?