Identical ID tags added to each <li>

The problem is probably not related to toc_js as there is no occurence of sticky-wrapper in the module's source code for the 3.0.x-dev version.

And the module code doesn't add div tags between ul and li tags which is invalid:

https://caninclude.glitch.me/caninclude?child=div&parent=ul

You're absolutely right of course, it was in fact the Sticky module → — and my ludicrous configuration to target anything with a 'sticky' class on it — that was to blame for the crazy amount of sticky wrappers etc!

My ToC blocks were sticking NOT by virtue of the ToC.js configuration…

… but because of the Sticky module.

HOWEVER, I have completely removed the Sticky module now while leaving the ToC.js sticky option for both my Toc.js blocks and neither of them sticks at the top of the page when I scroll down?

I can confirm in the markup / module-based CSS that they appear as though they should be sticking at the top of the page which is what I am after, but the do not.

<div id="block-bit-by-bit-toclg"
  class="toc-lg d-none d-lg-block contextual-region block block-toc-js block-toc-js-block">
...
  <div class="toc-js sticky is-visible" ...

I have confirmed this behaviour on a clean DRupal 10 site with Olivero as the front end theme, the ToC.js block does not stick at the top of the page for me.

Am I expecting the wrong thing here?

The sticky positioning behavior is applied in its scrolling parent container only.

So your HTML must be specifically crafted for sticky behavior you want to get.

May be you'll find so more information here: https://www.lambdatest.com/blog/css-position-sticky-tutorial/