render (h, { slots, props, data, listeners, ...rest }) {
    // Get children
    const children = slots().default

    // Handle events
    const nonNativeEvents = {
      start: (e) => {
        const emitStart = listeners.start
        if (emitStart) {
          emitStart('start', e)
        }
      },
      finish: (e) => {
        const emitFinish = listeners.finish
        if (emitFinish) {
          emitFinish('finish', e)
        }
      }
    }
    const { native, nonNative } = extractListeners({ listeners }, nonNativeEvents)

    return h(CAnimateHeight, {
      ...rest,
      props: {
        isOpen: props.isOpen,
        duration: props.duration,
        enterEasing: props.easing,
        leaveEasing: props.easing,
        initialHeight: props.startingHeight,
        finalHeight: props.endingHeight,
        animateOpacity: props.animateOpacity
      },
      on: nonNative,
      nativeOn: native,
      attrs: {
        'data-chakra-component': 'CCollapse'
      }
    }, [h(CBox, {
      props: {
        as: props.as
      },
      attrs: data.attrs
    }, children)])
  }
CCollapse component

Create regions of content that can expand/collapse
with a simple animation.

@extends CAnimateHeight
@see Docs https://vue.chakra-ui.com/collpse