How to use the @rmwc/base.useId function in @rmwc/base

export const useTabFoundation = (props: TabProps & React.HTMLProps) => {
  const tabIndicatorApi = useRef();
  const setTabIndicatorApi = (api: TabIndicatorApi) =>
    (tabIndicatorApi.current = api);

  const contextApi = useContext(TabBarContext);
  const id = useId('tab', props);

  const { foundation, ...elements } = useFoundation({
    props,
    elements: { rootEl: true, contentEl: true },
    foundation: ({ rootEl, contentEl, emit, getProps }) => {
      return new MDCTabFoundation(
        /** @type {!MDCTabAdapter} */ {
          setAttr: (attr: string, value: any) =>
            rootEl.setProp(attr as any, value),
          addClass: (className: string) => rootEl.addClass(className),
          removeClass: (className: string) => rootEl.removeClass(className),
          hasClass: (className: string) => rootEl.hasClass(className),
          activateIndicator: (previousIndicatorClientRect: ClientRect) =>
            tabIndicatorApi.current?.activate(previousIndicatorClientRect),
          deactivateIndicator: () => tabIndicatorApi.current?.deactivate(),
          notifyInteracted: () => {

export const useChipFoundation = (props: ChipProps & React.HTMLProps) => {
  const chipId = useId('chip', props);

  const foundationWithElements = useFoundation({
    props,
    elements: {
      rootEl: true,
      trailingIconEl: true,
      checkmarkEl: true
    },
    foundation: ({ rootEl, checkmarkEl, emit, getProps }) =>
      new MDCChipFoundation({
        addClass: className => {
          rootEl.addClass(className);
        },
        removeClass: className => rootEl.removeClass(className),
        hasClass: className => rootEl.hasClass(className),
        addClassToLeadingIcon: className => {