Проблема в потоке добавления и отправки события

Question

У меня есть DIV, в котором есть какой-то контент, я просто хочу масштабировать DIV с помощью события resize. Проблема, с которой я сталкиваюсь, заключается в потоке добавления или отправки события, поскольку я не могу получить ширину DIV. Я всегда получаю одинаковую ширину при изменении размера окна. Я получаю ширину, используя код ниже:

let botWrapDesignAreaGetW = document.querySelector('.botWrapDesignArea').getBoundingClientRect();

Выход:

DOMRect {x: 551.5, y: 170.5, width: 480, height: 480, top: 170.5, …}

Ширина в вышеупомянутом объекте должна измениться, поскольку я изменяю размер моего окна, чего не происходит.

Код для изменения размера div:

editor.js

export const canvaResizeHorizontal = () => {
    console.log("canvaResizeHorizontal");
    let botWrapDesignAreaWidth = document.querySelector('.botWrapDesignArea').offsetWidth;
    let botWrapDesignAreaGetW = document.querySelector('.botWrapDesignArea').getBoundingClientRect();

    let botWrapCGet = document.querySelector('.botWrapC').offsetWidth;
    console.log(botWrapDesignAreaGetW);

    document.querySelector('.botWrapDesignAreaM').style.width = botWrapDesignAreaGetW.width.toFixed(0) +'px';
    document.querySelector('.botWrapDesignAreaM').style.height = botWrapDesignAreaGetW.height.toFixed(0) +'px';
    document.querySelector('.botWrapTDesignACon').style.width = botWrapDesignAreaGetW.width.toFixed(0) +'px';
    document.querySelector('.botWrapNewPage').style.width = botWrapDesignAreaGetW.width.toFixed(0) +'px';
    document.querySelector('.botWrapDesignAreaM').style.margin = '0px';
    document.querySelector('.botWrapDesignArea').style.width = "480px";
    document.querySelector('.botWrapDesignArea').style.height = "480px";
     if(botWrapCGet <=  botWrapDesignAreaWidth + 200){
        document.querySelector('.botWrapDesignArea').style.transform = "scale(" +  botWrapDesignAreaGetW.width / (botWrapDesignAreaWidth + 200) + ")";
    }
 }

Я импортирую эту функцию в другой компонент React: Main-container.jsx:

class MainContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.threshold = 160;
    const widthThreshold = window.outerWidth - window.innerWidth > this.threshold;
    this.orientation = widthThreshold ? 'vertical' : 'horizontal';
  }

  componentDidMount() {
        init();
        if(this.orientation === 'vertical'){
      console.log("Dev console Vertically open");
     // canvaResizeHorizontal();
     window.dispatchEvent(new Event('resize')); 
      window.addEventListener('resize', canvaResizeHorizontal)

      //canvaResizeHorizontal();

    }else{
      console.log("Dev console Horizontally open")
      window.addEventListener('resize', canvaResizeVertical);
      window.dispatchEvent(new Event('resize'));
      canvaResizeVertical();

    }
  }

Код в else части в ComponentDidMount работает нормально, он не работает в случае console.log("Dev console Vertically open"), т. Е. В , если , случай.

Может кто-нибудь указать мне, где именно я здесь не так!