Want to access custom register component state in builder?

Technical Questions
,
1

I want to access normal register component state in builder.
I have the following component, I want to access it’s state in builder

import { withChildren } from "@builder.io/react";
import {
  Checkbox,
  FormControl,
  ListItemText,
  MenuItem,
  Select,
  SelectChangeEvent,
} from "@mui/material";
import { useState } from "react";
import { IMUISelect } from "./Types";
import { useRouter } from "next/router";

const MUISelectComponent: React.FC<IMUISelect> = ({
  itemHeight,
  itemPaddingTop,
  itemWidth,
  width,
  margin,
  height,
  options,
  paramName,
}) => {
  const [selectedItem, setSelectedItem] = useState<Array<string>>([]);
  const router = useRouter();

  const MenuProps = {
    PaperProps: {
      style: {
        maxHeight: Number(itemHeight)! * 4.5 + Number(itemPaddingTop)!,
        width: itemWidth,
      },
    },
  };

  const handleChange = (event: SelectChangeEvent<typeof selectedItem>) => {
    const {
      target: { value },
    } = event;
    if (value && value.length > 0) {
      if (Array.isArray(value)) {
        setSelectedItem(value);
        router.push(`${router.query?.page?.[0]}/?${paramName}=${value}`);
      }
    }
  };

  return (
    <FormControl sx={{ m: margin, width: width, height: height }}>
      {options && (
        <Select
          multiple
          sx={{ height: "2.313rem" }}
          value={selectedItem!}
          onChange={handleChange}
          renderValue={(selected) => selected.join(", ")}
          MenuProps={MenuProps}
        >
          {options.map((item: any) => (
            <MenuItem key={item.title} value={item.title}>
              <Checkbox
                checked={
                  selectedItem?.filter(
                    (searchItem: any) => searchItem === item?.title
                  )?.length > 0
                }
              />
              <ListItemText primary={item.title} />
            </MenuItem>
          ))}
        </Select>
      )}
    </FormControl>
  );
};
export const MUISelect = withChildren(MUISelectComponent);

It is register in my main file


Builder.registerComponent(MUISelect, MUISelectOptions)

Here is it’s options

import { ReactNode } from "react";

export interface IMUISelect {
  itemHeight?: string;
  itemPaddingTop?: string;
  tag?: string;
  itemWidth?: string;
  width?: string;
  height?: string;
  margin?: string;
  children?: ReactNode;
  multiple?: boolean;
  paramName?: string;
  options?: Array<{ option: string }>;
}

export const MUISelectOptions = {
  name: "MUISelect",
  noWrap: true,
  inputs: [
    {
      name: "itemHeight",
      type: "string",
    },
    {
      name: "itemPaddingTop",
      type: "string",
    },
    {
      name: "tag",
      type: "string",
    },
    {
      name: "itemWidth",
      type: "string",
    },
    {
      name: "width",
      type: "string",
    },
    {
      name: "height",
      type: "string",
    },
    {
      name: "margin",
      type: "string",
    },
    {
      name: "paramName",
      type: "string",
    },
    {
      name: "options",
      type: "list",
      subFields: [
        {
          name: "option",
          type: "string",
        },
      ],
    },
  ],
};