如何在添加菜单栏后调整窗口大小

import React, { useState, useRef } from 'react';

function App() {
  const [width, setWidth] = useState(window.innerWidth);
  const [height, setHeight] = useState(window.innerHeight);
  const ref = useRef(null);

  const handleResize = (event) => {
    setWidth(event.target.innerWidth);
    setHeight(event.target.innerHeight);
  };

  return (
    <div ref={ref} style={{ width, height, overflow: 'auto' }} onResize={handleResize}>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '50px', backgroundColor: '#f1f1f1' }}>
        菜单栏
      </div>
      <div style={{ position: 'absolute', top: '50px', left: 0, right: 0, bottom: 0, overflow: 'auto' }}>
        内容区域
      </div>
    </div>
  );
}

export default App;