ReactJS: TextField AutoScroll

Question

I am trying to create a react element that has a TextField element, which automatically scrolls to the bottom of the textfield when there the TextField value updates it states, or if the user enters a new value. This is what I have right now:

constructor(props){
        super(props);
        this.textLog = React.createRef();
}

componentDidUpdate(prevProps, prevState, snapshot) {
        /* Extra irrelavent code */

        if (prevProps.response !== this.props.response) {
            let currentText = this.state.textArea;
            currentText += timeToDisplay + "   Quinly: " + this.props.response + '\n';
            this.setState({textArea:currentText})
            this.textLog.current.scrollTop = this.textLog.current.scrollHeight;
        }
    }

setTextBox = event => {
        
        let currentText = this.state.textArea;
        currentText += timeToDisplay + "   User: " + this.state.inputText + '\n';
        this.sendCommand(this.state.inputText)
        this.setState({inputText: ""})
        currentText += timeToDisplay + "   Quinly: " + this.props.response + '\n';
        this.setState({textArea:currentText})
        this.textLog.current.scrollTop = this.textLog.current.scrollHeight;
    }

<TextField
       id="outlined-multiline-static"
       multiline
       rows={12}
       className={classes.fieldHeight}
       ref = {this.textLog}
       value = {this.state.textArea}
/>

So the UI of this is very similar to that of a message box, where the user enters their input, and their input appears in the textbox along with the response from the server (I blurred out the messages for privacy):

Anyway for some reason, the autoscroll doesnt seem to work properly, so every time a new message gets added, the user has to manually scroll. Any ideas?