Draggable window lagging on movement

So I’m trying to create draggable-resizable iframe which will work on any site.
I created one. On some websites works perfectly, but on others – very laggy. When i move this window around, it just very slow and not following mouse speed.

I don’t know why this happens… What should i do?

My code (which could be completely wrong):

import React, { useState, useEffect } from 'react';
import { Rnd } from 'react-rnd';

const style = {
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
  justifyContent: "center",
  border: "solid 1px #402791",
  background: "#000000bf",
  zIndex: 9999998,
  overflow: "hidden",
  pointerEvents: "auto",
  position: "absolute",
} as const;

const dragHandleStyle = {
  width: "100%",
  height: "30px",
  background: "#402791",
  cursor: "move",
  zIndex: 9999999,
};

const DraggableResizableWindow = () => {
  const [dragging, setDragging] = useState(false);

  useEffect(() => {
    if (dragging) {
      const overlay = document.createElement('div');
      overlay.id = 'drag-overlay';
      overlay.style.position = 'fixed';
      overlay.style.top = '0';
      overlay.style.left = '0';
      overlay.style.width = '100%';
      overlay.style.height = '100%';
      overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
      overlay.style.zIndex = '9999997';
      overlay.style.pointerEvents = 'none';
      document.body.appendChild(overlay);

      document.body.style.pointerEvents = 'none';
    } else {
      const overlay = document.getElementById('drag-overlay');
      if (overlay) {
        document.body.removeChild(overlay);
      }

      document.body.style.pointerEvents = 'auto';
    }

    return () => {
      const overlay = document.getElementById('drag-overlay');
      if (overlay) {
        document.body.removeChild(overlay);
      }
    };
  }, [dragging]);

  const handleDragStart = () => {
    setDragging(true);
  };

  const handleDragStop = () => {
    setDragging(false);
  };

  return (
    <Rnd
      style={style}
      default={{
        x: 400,
        y: 400,
        width: 400,
        height: 300,
      }}
      dragHandleClassName="drag-handle"
      bounds="window"
      onDragStart={handleDragStart}
      onDragStop={handleDragStop}
    >
      <div className="drag-handle" style={dragHandleStyle}></div>
      <iframe
        src="https://example.com/"
        width="100%"
        height="100%"
        style={{ border: "none" }}
        title="Example iframe"
      />
    </Rnd>
  );
};

export default DraggableResizableWindow;