Cannot edit form in React with defaultValue

Question

I am making a MERN app in which I want to allow users to edit some previously stored values. So I am putting the previous values using defaultValue in the input fields of the form. Now whenever I submit the form with changed values the useRef variables never gets updated. But works fine without defaultValue.

Here is a snippet from my code:

<Box>
  <TextField
    id='outlined-basic'
    label='Event Name'
    variant='outlined'
    defaultValue={event.eventname}
    inputRef={EventNameRef}
  />
</Box>
<Box sx={{ marginTop: '10px' }}>
  <TextField
    id='outlined-basic'
    label='About Event'
    variant='outlined'
    defaultValue={event.aboutevent}
    inputRef={AboutEventRef}
  />
</Box>

I have seen several StackOverflow posts but none works for me.Please help.Thanks in advance.