How to bundle imperative DOM manipulations with React component?

I want to add a bit of imporative/vanillajs dom manipulations to website that is server-side rendered using ReactDOMServer.renderToStaticMarkup. Current interim result is here: https://turboeshop.com . How do I add some component-specific dom manipulations? Had hopes when heard of React Server Components but they just don't seem to be solving this problem...

Stack is:
a) https://www.storyblok.com CMS - where content editor dynamically select which components should be rendered on the page.
b) Components themselves are stored in https://bit.dev/ for separation of concerns. Works well.
c) Backend - express js. It has all the components from bit.dev imported. On each request backend gets a list of components in specific order it has to render from CMS. Generates html using renderToStaticMarkup and purges css on the fly. This all is working well.

But how do I dynamically generate the dom manipulations JS file - something similar to https://news.ycombinator.com/hn.js?6RUTmhnEOrlF5IZtuFJ1 , based on specific components that where orchestrated by CMS to appear on the given page?

My questions I as myself are as follows:

1. I want the dom manipulations that are 'component-scoped' (i.e. dealing with this specific component) to be physically stored alongside the components jsx and css in single component folder. Any tipns'n'tricks on architectural approach on how to arrange component-scoped and page-level dom manipulations code? (did not write jquery-like frontend myself, am not too aware of the challanges of imperative dom manipulations)
2. Where should I store the javascript code itself in the component directory? Any naming conventions or tips&tricks? Should there be only one component root element with unique id attribute for more straightforward selectors?
3. Where are the best practices of such architecture described(if anywhere)?
4. What express.js controller should be doing to generate JS file dynamically - loop through all the components that are used in the page and extract js - how would I do that?
5. Should I use https://github.com/acornjs/acorn to parse the code before putting it to the final bundle or just copy/paste code and that's it. This would just be a sort-of QA step, probably just a nice-to-have thing.
6. Write ES2015 and transpile or stick to ES5(as the HackerNews example above) and have better readability.
7. Should webpack(rollup, esbuild, etc) be used on the flow or it's more of a custom-made backend logic and there's no need to use third party tools?
8. Started searching github global search with renderToStaticMarkup looking for some example repo, but if you know any open source project implemented this way - kindly please share.

If you have tried such approach or have an idea how you implement such architecture - kindly please share your thoughs or experience, any input is much appreciated!

Please let's not get into discussion of why not just use react as is - bussiness requirements strictly forbids hydration, js-based routing and bundle size anything bigger than the minimum js it takes to do the job (which are from primitive to advanced-complexity dom manipulations with some bussines s logic behind). Yes i'm also aware of web components and those will be used where appropriate, but the question this time is not about that.

from How to bundle imperative DOM manipulations with React component?