The function passed by vue3 to receive props does not take effect

<template >
  <div class="xtx-confirm" :class="{ fade }">
    <div class="wrapper" :class="{ fade }">
      <div class="header">
        <h3>{
   
   {title}}</h3>
        <a @click="cancel" class="iconfont icon-close-new"></a>
      </div>
      <div class="body">
        <i  class="iconfont icon-warning"></i>
        <span>{
   
   { text }}</span>
      </div>
      <div class="footer">
        <XtxButton size="mini" type="gray" @click="cancelCallBack()">取消</XtxButton>
        <XtxButton size="mini" type="primary" @click="submitCallBack()">确认</XtxButton>
      </div>
    </div>
  </div>
</template>


<!-- //当前组件不是在APP下进行渲染，无法使用APP下的环境（全局组件，全局指令，原型属性函数） -->
<script>
import XtxButton from './xtx-box.vue'
import { onMounted,ref } from 'vue'
export default {
  name: 'XtxConfirm',
  components:{XtxButton},
  props: {
    title: {
      type: String,
      default: '温馨提示'
    },
    text: {
      type: String,
      default: ''
    },
    cancelCallBack: {
      type: Function
    },
    submitCallBack: {
      type: Function
    },
  setup(props){
    const fade = ref(false)
    const submit=()=>{
      props.submitCallBack()
    }
    const cancel =()=>{
      props.cancelCallBack()
    }
    onMounted(()=>{
      setTimeout(() => {
        fade.value =true
      }, 0);
    })
 
    return { fade,submit,cancel }
  }
}
}
</script>

Using the cancel function and then calling cancelCallBack() in props does not take effect.

 @click="cancelCallBack() @click="submitCallBack()" but it works