how to wrap `<table>` with `<div>` for @astrojs/mdx | Astro Lounge | Page 1

I'm trying to do the following ,

<table>code goes here</table>

<!-- the above code transforms into the below code -->

<div class="tabel-container"><table>code goes here</table></div>

I've tried to use third-party plugins like rehype-wrap-all and they dont work , i'm not sure if its astro or the plugin itself that's broken

is there a way that just works for doing what I'm trying to do?

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import react from "@astrojs/react";
import wrap from "rehype-wrap-all";


export default defineConfig({
    site: "https://example.com",
    markdown: {
        syntaxHighlight: false,
        gfm: true,
    },
    integrations: [mdx({
        rehypePlugins: [[wrap, {
            selector: 'table',
        }]]
    }), sitemap(), react()],
    output: 'server',
});

how to wrap <table> with <div> for @astrojs/mdx

#how to wrap `<table>` with `<div>` for @astrojs/mdx