<Html/> object scrolling bug

[ntg7creation]

• three version: 0.167.1
• @react-three/fiber version: 8.16.8
• @react-three/drei version: 9.108
• node version: 20.11.1
• npm (or yarn) version: 10.2.4

Problem description:

I have an object with some text in it
I just need it to be in the scene but it keeps scrolling up (Im trying to have it in a fixed location)

in a different place in my code, I have
a
if I disable the ScrollControls everything is fine
but I cannot seem to be able to have it not effect the object

Relevant code:

https://codesandbox.io/p/sandbox/cocky-paper-lm69jj?file=%2Fsrc%2Findex.jsx&from-embed=

Suggested solution:

I'm thinking I may need to place the HTML in a different Layer?
I don't really know why its being effected when everything else is not effected