MUI Accordion - Adjusting the Accordion Details height with dynamic content

I am using MUI Accordion. In the Accordion details I have multiline textfield component to capture user responses and a button at the bottom for saving the data. Now if the user is keying in multiple lines, the button moves down and then disappears. Accordion details is not adjusting the height dynamically with the increase in the height for textfield component. If the user collapse and expand the accordion again the height readjusts.

How can I adjust the height of the accordion details dynamically as the text field contents grows ?

<AccordionDetails key={"SubCatIDDetails_" + this.props.SubCategoryID} >

            {quesSubCategories.map((quesSubCat) => (

                <>
                    <Grid container spacing={2} marginTop={1} marginBottom={1} textAlign={'Left'}>
                        <Grid item xs={3}>
                            <Typography>  {quesSubCat.question}
                                {quesSubCat.hint.length > 0 && <HtmlTooltip
                                    title={<Typography color="inherit"><i>{quesSubCat.hint}</i></Typography>}>
                                    <IconButton>
                                        <InfoIcon color="primary" />
                                    </IconButton>
                                </HtmlTooltip>}
                            </Typography>
                        </Grid>
                        <Grid item xs={3.5}>
                            <TextField multiline fullWidth label="Response" name="Response" defaultValue={quesSubCat.response || ''} onBlur={(event) => this.props.handler([quesSubCat.quesID, quesSubCat.responseID, event.target.value, event.target.name])} />
                        </Grid>
                        <Grid item xs={3}>
                            <TextField multiline fullWidth label="Notes" name="Notes" onBlur={(event) => this.props.handler([quesSubCat.quesID, quesSubCat.responseID, event.target.value, event.target.name])} />
                            <NotesDetails  Updated={this.props.UpdatingResponse} NoteType="Question" QuestionID={quesSubCat.quesID} ApplicationID={this.props.ApplicationID} userEmail={this.props.userEmail} />
                        </Grid>
                        <Grid item xs={2.5}>
                            <Status currentStatus={quesSubCat.quesStatus} QuesCat={quesSubCat.quesID} ResponseID={quesSubCat.responseID} currentTargetDt={quesSubCat.targetDate} handlerChange={this.HandleStatusChange} />
                        </Grid>
                    </Grid>
                    <Divider style={{ background: '#c4540c' }} />
                </>
            ))}
            
            {this.props.UpdatingResponse && <p style={{ marginLeft: '15px' }}><em>Updating...</em></p>}
            
            <Button style={{ marginTop: '10px', marginBottom: '10px', marginLeft: '10px' }} color="warning" variant="contained" startIcon={<SaveIcon />} onClick={this.props.handlerClick}>Save & Continue</Button>
            
        </AccordionDetails>