根据窗口大小创建响应框

Question

我正在使用以下代码，目的是创建盒子区域，其大小与移动设备与PC等设备中的访问设备的屏幕尺寸有关。

import React, { useRef, useState} from "react";
import withStyles from "@material-ui/core/styles/withStyles";

const TweetSheet = ({classes}) => {
    const winWidth = useState(window.innerWidth)
    const winHeight = useState(window.innerHeight)    

    return (
        <div className={classes.ts1}>
          TextArea
        </div>
    );
  }

  const styles = (winWidth, winHeight) => (
    {      
      ts1: {
          display: "flex",
          flexDirection: "column",
          border: "3px solid",
          borderRadius: "5px",
          // width: "600px",
          width: (winWidth * 0.05),
          // minHeight: "200px",
          minHeight: (winHeight *0.01),
          padding: "20px"
      },           
    })

  export default withStyles(styles)(TweetSheet)

但是，即使我使用窗口大小来定义高度和宽度，该框也没有响应。