How to use the @zendeskgarden/container-utilities.generateId function in @zendeskgarden/container-utilities

export function useField(idPrefix?: string): IUseFieldPropGetters {
  const [prefix] = useState(idPrefix || generateId('garden-field-container'));
  const inputId = `${prefix}--input`;
  const labelId = `${prefix}--label`;
  const hintId = `${prefix}--hint`;

  const getLabelProps = ({ id = labelId, htmlFor = inputId, ...other } = {}) => {
    return {
      id,
      htmlFor,
      'data-garden-container-id': 'containers.field',
      'data-garden-container-version': PACKAGE_VERSION,
      ...other
    } as any;
  };

  const getInputProps = ({ id = inputId, ...other } = {}, { isDescribed = false } = {}) => {
    return {

.add('useField', () => {
    const Field = ({ id }: { id: string }) => {
      const { getLabelProps, getInputProps, getHintProps } = useField(id);
      const [value, setVal] = React.useState('');
      const onChange = (event: React.ChangeEvent) => setVal(event.target.value);

      return (
        <>
          <label>Accessible Native Input</label>
          <div>Optional Hint</div>
          <input>
        
      );
    };

    return ;
  })
  .add('FieldContainer', () =&gt; (

export const useTooltip = ({
  delayMilliseconds = 500,
  id,
  isVisible
}: IUseTooltipProps = {}): IUseTooltipReturnValue => {
  const [visibility, setVisibility] = useState(isVisible);
  const [_id] = useState(id || generateId('garden-tooltip-container'));
  const isMounted = useRef(false);

  let openTooltipTimeoutId: number | undefined;
  let closeTooltipTimeoutId: number | undefined;

  const openTooltip = (delayMs = delayMilliseconds) => {
    clearTimeout(closeTooltipTimeoutId);

    const timerId = setTimeout(() => {
      if (isMounted.current) {
        setVisibility(true);
      }
    }, delayMs);

    openTooltipTimeoutId = Number(timerId);
  };

export function useAccordion({
  idPrefix,
  expandedSections,
  onChange,
  expandable = true,
  collapsible = true
}: IUseAccordionProps = {}): IUseAccordionReturnValue {
  const [prefix] = useState(idPrefix || generateId('garden-accordion-container'));
  const TRIGGER_ID = `${prefix}--trigger`;
  const PANEL_ID = `${prefix}--panel`;
  const [expandedState, setExpandedState] = useState(expandedSections || []);

  const controlledExpandedState = getControlledValue(onChange && expandedSections, expandedState);

  const [disabledState, setDisabledState] = useState(collapsible ? [] : controlledExpandedState);

  const sectionIndices: number[] = [];
  const toggle = (index: number) => {
    const expanded: number[] = [];
    const disabled: number[] = [];

    sectionIndices.forEach(sectionIndex => {
      let isExpanded = false;

export function useModal(
  { onClose, modalRef, id: _id, focusOnMount, environment }: IUseModalProps = {} as any
): IUseModalReturnValue {
  const [idPrefix] = useState(_id || generateId('garden-modal-container'));
  const titleId = `${idPrefix}--title`;
  const contentId = `${idPrefix}--content`;

  const closeModal = (event: KeyboardEvent | MouseEvent) => {
    onClose && onClose(event);
  };

  const getBackdropProps = ({ onClick, ...other } = {} as any) => {
    return {
      onClick: composeEventHandlers(onClick, (event: MouseEvent) => {
        closeModal(event);
      }),
      'data-garden-container-id': 'containers.modal',
      'data-garden-container-version': PACKAGE_VERSION,
      ...other
    };

export function useTabs({
  vertical,
  idPrefix,
  ...options
}: IUseTabsProps = {}): IUseTabsReturnValue {
  const { selectedItem, focusedItem, getContainerProps, getItemProps } = useSelection({
    direction: vertical ? 'vertical' : 'horizontal',
    defaultSelectedIndex: 0,
    ...options
  });
  const [_id] = useState(idPrefix || generateId('garden-tabs-container'));
  const PANEL_ID = `${_id}--panel`;
  const TAB_ID = `${_id}--tab`;

  const getTabListProps = ({ role = 'tablist', ...other }: React.HTMLProps = {}) => {
    return {
      role,
      'aria-orientation': vertical ? 'vertical' : 'horizontal',
      'data-garden-container-id': 'containers.tabs',
      'data-garden-container-version': PACKAGE_VERSION,
      ...other
    };
  };

  const getTabProps = ({ role = 'tab', index, ...other }: IGetTabProps = {} as any) => {
    requiredArguments(index, 'index', 'getTabProps');