Unable to change the editor height based on the screen

[Udayendu]

Currently I am unable to change the height of the editor based on the screen. Is there any way we can fix it ? Here is how my current editor setting is looking like:

<MDEditor
    height={600}
    value={content}
    onChange={handleContent}
    preview="live"
/>

I am expecting the setting something like the below based on the screen size:

<MDEditor
    height={{ xs: 300, sm: 500, md: 600, lg: 700 }}
    value={content}
    onChange={handleContent}
    preview="live"
/>

[jaywcjlove]

@Udayendu https://codesandbox.io/embed/markdown-editor-for-react-https-github-com-uiwjs-react-md-editor-issues-515-tpu706?fontsize=14&hidenavigation=1&theme=dark

import React, { Fragment, useState } from "react";
import ReactDOM from "react-dom";
import MDEditor, { selectWord } from "@uiw/react-md-editor";
import "./index.css";

const mkdStr = `
# Markdown Editor

---

**Hello world!!!**

[![](https://avatars.githubusercontent.com/u/1680273?s=80&v=4)](https://avatars.githubusercontent.com/u/1680273?v=4)

\`\`\`javascript
import React from "react";
import ReactDOM from "react-dom";
import MEDitor from '@uiw/react-md-editor';

\`\`\`
`;

function App() {
  const [height, setHeight] = useState(300);
  const [value, setValue] = useState(mkdStr);
  const styl = { height };
  return (
    <Fragment>
      <input
        type="number"
        value={height}
        onChange={(evn) => setHeight(Number(evn.target.value))}
      />
      {height}
      <div className="container" style={styl}>
        <MDEditor height="100%" value={value} onChange={setValue} />
      </div>
    </Fragment>
  );
}

ReactDOM.render(<App />, document.getElementById("container"));