react input component with dynamic height

autoheight.js

import React, { useState } from "react";
import "./style.css";

const DynamicHeightInput = () => {
  const [textareaHeight, setTextareaHeight] = useState(42);
  const [formValue, setFormValue] = useState({});

  const onChange = (event) => {
    event.preventDefault();
    event.persist();
    setFormValue({ ...formValue, [event.target.name]: event.target.value });
  };

  return (
    <div className="message-input">
      <textarea
        placeholder={"Type a message"}
        className="textMessageInput"
        name="body"
        value={formValue.body || ""}
        onChange={(e) => {
          onChange(e);
          const height = document.querySelector('textarea[name="body"]')
            ?.scrollHeight;
          setTextareaHeight(height > 42 ? height : 42);
        }}
        style={{
          minHeight: `${formValue.body ? textareaHeight || 42 : 42}px`,
        }}
      />
    </div>
  );
};

DynamicHeightInput.propTypes = {};
export default DynamicHeightInput;