I am currently making an HTMLCanvas2D engine for myself but as the title suggest occasionally the canvas displays unfinished Frames. There is no consistency to when or how often it does so. I assume the problem is a combination with my structure and how react updates components. (If that matters almost everything below these functions in the tree are class based and not functional like the react overhead)

export function GameScreen( ... ) {
  const Canvasref = useRef<HTMLCanvasElement>(null);
  const Globalvars = UseGameContext(); //Get React information from outside.
  
  const Gameinput: InputHandler = InputHandler.getInput(); //deals with Event Listeners
  const Logic: GameLogic = new GameLogic(); //Entry point into my actual logic.

  useEffect(() => {
    function game() {
      RenderLoop(
        ({ canvvas, ctx }) => {
          ... checks for a valid canvas ...
          ... add Event listeners ...
          window.addEventListener("resize", () => { canvas.height = window.innerHeight; 
            canvas.width = window.innerWidth; }); 
            //Window listener to make the canvas always the size of the Webpage if that matters here
          Logic.Initialize(ctx);
        },
        (delta, { canvas, ctx }) => {
          ...Savety checks...
          Logic.updateLogic(delta);
          Logic.drawFrame(delta);
        }, id = "myCanvas";
      );
    }
    game();
  }, []);
  return (< canvas id="myCanvas" ref={Canvasref}></canvas>);
}

//the function implemented above
export function RenderLoop(
    onInit: (context: {
        ctx: CanvasRenderingContext2D;
        canvas: HTMLCanvasElement;
    }) => void,
    onUpdate: (
        delta: number,
        context: {
            ctx: CanvasRenderingContext2D;
            canvas: HTMLCanvasElement;
        }
    ) => void,
    id = "myCanvas"
) {
    const canvas = document.getElementById(id);
    if (canvas && canvas instanceof HTMLCanvasElement) {
        const ctx = canvas.getContext("2d");

        if (ctx) {
            onInit({ canvas, ctx });
            window.requestAnimationFrame(
                Update((delta) => onUpdate(delta, { canvas, ctx }))
            );
        }
    }
}

//delta calculation and the recursive loop to rerender every frame
const Update = (onUpdate: (delta: number) => void) => (time: number) => {
    if (elapsedTime !== null) {
        const delta = time - elapsedTime;
        onUpdate(delta);
    }
    elapsedTime = time;
    window.requestAnimationFrame(Update(onUpdate));
};

class GameLogic {
...lots of things ...

drawFrame(delta: number) {
  this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.width);
  this.GameObject.forEach((object) => { object.Draw(delta)});//What I draw should not matter
}

I have tried to remove the clearRect assuming that may be the cause but while less noticeable it still happens between objects that are drawn in code lines adjacent to each other. The Logic and the functions are called each frame it is purely visually as far as I can tell. Neither the size of the canvas/window nor the amount of objects seem to have any obvious correlation (weither I have 1 object or 20 like right now).

If anything else may be important for this please do tell me My codebase overall is a bit too big to post everything but this should give an overview of a minimum that should reproduce the problem