How to make a textarea that auto-resizes in React

Question

Assumption :

I am trying to make a textarea that auto-resizes based on its input, and the code below works.

Question :

But once I delete this line : textArea.current.style.height = "auto";, it does not work. Why is that?

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

const Main = () => {

    const textArea = useRef(null);
    const adjustHeight = () => {
        textArea.current.style.height = "auto";
        textArea.current.style.height = `${textArea.current.scrollHeight}px`
    }
    
    return (

        <div className='flex h-full'>
            <div className='flex flex-col w-1/5 bg-[#202123]'>
                <div className='w-[95%] mx-auto p-3 flex flex-col'>
                    <div className='bg-[#374151] border-2 text-white border-white rounded-md p-2 pl-3'>
                        <button><a href='/newchat'>+ New chat</a></button>
                    </div>
                </div>

            </div>
            <div className='relative flex justify-center items-center w-4/5 bg-gradient-to-r from-purple-400 to-pink-600'>
                <div className='absolute top-[38%] font-bold text-[50px]'>
                    I will memorize what you say!
                </div>
                <div>
                    <textarea ref={textArea} onChange={adjustHeight}></textarea>
                     
                </div>
            </div>
        </div>)

}

export default Main;```


I would say that everytime onChange event happnens, setting the height of the textarea to be `${textArea.current.scrollHeight}px` should be enough to resize the textarea dynamically. Any suggestion would be appreciated.