How to change Flowbite Modal backdrop color (with Vue3)

Question

I am trying to implement a modal component (in Vue3) using TailwindCSS/Flowbite. I have read all the documentation provided by Flowbite, but I still cannot change the background color and show/hide the modal programmatically. Regarding the last part, I can hide the modal itself but not the background, which still remains visible. What am I doing wrong?

<script>
    import { initFlowbite } from 'flowbite';
    import { Modal } from 'flowbite';

    export default {
        name: 'VbModal',
        props:{
            id: String
        },
        data(){
            return{
                modal: null
            }
        },
        methods:{
            closeModal(){
                this.modal.hide();
            },

            showModal(){
                this.modal.show();
            }
        },
        mounted(){
            
            const modalElement = document.getElementById(this.id);
            const modalOptions = {
                placement: 'bottom-right',
                backdrop: 'dynamic',
                backdropClasses:
                    'bg-red-900/50 dark:bg-red-900/80 fixed inset-0 z-40',
                closable: true,
                onHide: () => {
                    console.log('modal is hidden');
                },
                onShow: () => {
                    console.log('modal is shown');
                },
                onToggle: () => {
                    console.log('modal has been toggled');
                },
            }

            const instanceOptions = {
                id: this.id,
                override: true
            };

            this.modal = new Modal(modalElement, modalOptions, instanceOptions);

        }
    }
</script>

<template>
    <div :id="id" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
        <div class="relative w-full max-w-lg max-h-full">
            <div class="relative rounded-lg shadow bg-ubotics-650 border border-ubotics-500">
                <slot/>
            </div>
        </div>
    </div>

</template>

<style lang="">
    
</style>