В вашем CodeSandBox, основываясь на моем тестировании, события перетаскивания и изменения размера запускаются одновременно. Вы можете использовать свойство cancel для react-draggable, чтобы перетаскивание не происходило, когда дескриптор изменения размера — это компонент, с которым осуществляется взаимодействие.

<Draggable
  cancel={".react-resizable-handle"}
    ...

Когда вы сделаете это, перетаскиваемый элемент больше не будет обновлять свое свойство CSS transform: translate при изменении размера — для этого вы можете выбрать управление положением перетаскиваемого компонента. Переместите / установите X и Y по мере необходимости, чтобы сохранить свое положение при изменении размера. Обратите внимание, что x и y состояние и установщики состояния должны находиться в общем родителе/предке среди этих компонентов, которые вы будете передавать в качестве реквизита.

export default function App() {
  // have the source of truth for the positions on a common parent/ancestor
  const [x, setX] = React.useState(0);
  const [y, setY] = React.useState(0);

  return (
    <div className="App">
      <PDFDialog x={x} y={y} setX={setX} setY={setY} />
    </div>
  );
}

...

class PDFDialog extends React.Component {
  state = {
    open: true
  };

  render() {
    const { open } = this.state;
    const { classes } = this.props;

    return (
      <StyledDialog
        open={open}
        classes={{ root: classes.dialog, paper: classes.paper }}
        PaperComponent={PaperComponent}
        aria-labelledby="draggable-dialog"
        PaperProps={{
          x: this.props.x,
          y: this.props.y,
          setX: this.props.setX,
          setY: this.props.setY
        }}
      >
        <ResizableBox
          height={520}
          width={370}
          minConstraints={[300, 500]}
          maxConstraints={[Infinity, Infinity]}
          className={classes.resizable}
          onResize={(e) => {
            if (e.movementX !== 0) {
              this.props.setX((prev) => prev + e.movementX);
            } else if (e.movementY !== 0) {
              this.props.setY((prev) => prev + e.movementY / 2);
            }
          }}
        ></ResizableBox>

        ...

// refactored draggable component:
<Draggable
  position={{ x: x, y: y }}
  cancel={".react-resizable-handle"} // <-- cancel the dragging if resize is interacted with
  onDrag={(e) => {
    if (e.movementX !== 0) {
      setX((prev) => prev + e.movementX);
    }
    if (e.movementY !== 0) {
      setY((prev) => prev + e.movementY);
    }
  }}
>
  <Paper {...props} />
</Draggable>

(В моем CodeSandBox я избавился от ограничений, таких как минимум height и width, чтобы наглядно показать пример)

Вы можете привязать событие изменения размера окна, рассчитать новую высоту и ширину и передать его resizable-box вашему

object.addEventListener("resize", function() {
//Here you can write logic to apply resizing on the resizable-box
});

Очевидно, что react-resizable использует встроенный CSS для обработки ширины и высоты блока, и для вашей проблемы я моделирую эту проблему, обратите внимание на приведенный ниже снимок экрана из Google Chrome devTools:

У react-resizable-box есть важный флаг, и он перезаписывает встроенное значение высоты, поэтому в представлении у меня есть следующее поведение: