Any idea about how to use toast using bootstrap-vue-next?

my-component.ts:

import { defineComponent } from 'vue';
import { ref } from "vue";
import { useToast } from 'bootstrap-vue-next';

export default defineComponent({
  data() {
    return {
      abc: '',
    }
  },
  setup() {
    const toast = useToast()
    return toast
  },
  async mounted() {
    // do nothing
  },
  methods: {
    async testToast() {
      try {
        this.show?.({props: {variant: 'success', title: 'Message', body: 'Toasted successfully!'}});
      } catch (err) {
        console.log(err)
        this.show?.({props: {variant: 'danger', title: 'Message', body: 'Something went wrong!'}})
      }
    }
  }
})

MyComponent.vue:

<template>
  <div class="my-component">
    <BButton @click="testToast" variant="success">Click Me</BButton>
  </div>
</template>
<script lang="ts">
  import MyComponent from './my-component';
  export default MyComponent;
</script>

The above code note at all working for me, really appreciate your help. P.S. This component being injected into app.ts file which has code written for App.vue main compoent.