React - How to Display a List of Schemas/Content Types but Only Allow the User to Select One

import React from "react";
import { isReferenceSchemaType } from "@sanity/types";
import { AddIcon } from "@sanity/icons";
import { Button, Grid, Menu, MenuButton, MenuItem } from "@sanity/ui";
import { useId } from "@reach/auto-id";

const LimitArray = React.forwardRef((props, ref) => {
    const { type, readOnly, children, onCreateValue, onAppendItem, value } = props;
    const menuButtonId = useId();
    const insertItem = React.useCallback(
        (itemType) => {
            const item = onCreateValue(itemType);
            onAppendItem(item);
        },
        [onCreateValue, onAppendItem]
    );
    const handleAddBtnClick = React.useCallback(() => {
        insertItem(type.of[0]);
    }, [type, insertItem]);
    if (readOnly) {
        return null;
    }
    const maxLength = type.validation[0]._rules.find((rule) => rule.flag === "max");
    if (maxLength && value && value.length >= maxLength.constraint) {
        return null;
    }
    return (
        <Grid
            gap={1}
            style={{ gridTemplateColumns: "repeat(auto-fit, minmax(100px, 1fr))" }}
            ref={ref}
        >
            {type.of.length === 1 ? (
                <Button icon={AddIcon} mode="ghost" onClick={handleAddBtnClick} text="Add item" />
            ) : (
                <MenuButton
                    button={<Button icon={AddIcon} mode="ghost" text="Add item…" />}
                    id={menuButtonId || ""}
                    menu={
                        <Menu>
                            {type.of.map((memberDef, i) => {
                                const referenceIcon =
                                    isReferenceSchemaType(memberDef) &&
                                    (<http://memberDef.to|memberDef.to> || []).length === 1 &&
                                    <http://memberDef.to[0].icon;|memberDef.to[0].icon;>
                                const icon =
                                    memberDef.icon || memberDef.type?.icon || referenceIcon;
                                return (
                                    <MenuItem
                                        key={i}
                                        text={memberDef.title || memberDef.type?.name}
                                        onClick={() => insertItem(memberDef)}
                                        icon={icon}
                                    />
                                );
                            })}
                        </Menu>
                    }
                />
            )}
            {children}
        </Grid>
    );
});

export default LimitArray;

{
    "implements": "part:@sanity/form-builder/input/array/functions",
    "path": "./schemas/parts/LimitArray.js"
}

{
    title: "Content",
    name: "content",
    type: "array",
    of: [{ type: "img" }, { type: "vid" }, { type: "word" }],
    validation: (Rule) => Rule.max(2),
},

// Array form component

export const LimitArray = (props) => {

  const {
    schemaType: { validation = [] },
  } = props;

const validationRules = validation
    .flatMap((rule) => rule._rules)
    .find((rule) => rule.flag === "max");

  const arrayLimit = validationRules ? validationRules.constraint : undefined;

  const arrayHasMaxElements = members.length >= arrayLimit ? true : false;

 return arrayHasMaxElements ? props.renderDefault({ ...props, arrayFunctions: () => null }): props.renderDefault(props);
};

export default defineConfig({
    ...
	form: {
      components: {
        input: (props) => {
          if (props.schemaType.name === "array") {
            return LimitArray(props)
          }
          return props.renderDefault(props);
        },
      },
    },
});