Extra field in update form with django and react

I am creating a note application with django and react. However, in my update form, there is an extra field that I did not add in the code:

https://i.stack.imgur.com/00C24.png

Here is my react code:

import React, { useEffect, useState, useRef } from 'react'
import { useParams } from 'react-router'
import { csrftoken } from '../components/CSRFToken'
import { Button } from '../components/Button'
import { Heading } from '../components/Heading'

function UpdateNote() {
  const { noteId } = useParams()
  
  const [title, setTitle] = useState("")
  const [content, setContent] = useState("")

  const titleRef = useRef()
  const contentRef = useRef()

  useEffect(() => {
    fetch(`/api/notes/update/${noteId}/`)
    .then(res => res.json())
    .then(json => {
        setTitle(json.title)
        setContent(json.content)
    })
  })

  const handleUpdateNoteButtonPressed = () => {
    const requestOptions = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRFToken': csrftoken
        },
        body: JSON.stringify({
            title: titleRef.current.value,
            content: contentRef.current.value
        })
    }

    fetch(`/api/notes/update/${noteId}/`, requestOptions)
    .then(res => res.json())
    .then(json => console.log(json)) 
  }

  return (
    <>
        <Heading center type={'h1'}>Update Note</Heading>
        <br />
        <br />
        <form>
            <div key={title}>
                <div className='flex-center-left-right'>
                    <div className={`form form__underline`}>
                        <input ref={titleRef} defaultValue={title} type={'text'} placeholder=" " id={'title'} className={`form__input form__underline__input`} />
                        <label className={`form__label form__underline__label`} for={'title'}>Note Title</label>
                    </div>
                </div>
            </div>
            <div key={content}>
                <div className='flex-center-left-right'>
                    <div className={`form form__underline`}>
                        <input ref={contentRef} defaultValue={content} type={'text'} placeholder=" " id={'content'} className={`form__input form__underline__input`} />
                        <label className={`form__label form__underline__label`} for={'content'}>Note Content</label>
                    </div>
                </div>
            </div>
        </form>
        <div align="center">
            <Button size={'medium'} style={'primary'} variant={'filled'} onClick={handleUpdateNoteButtonPressed}>Update</Button>
        </div>
    </>
  )
}

export default UpdateNote

If I remove one of the text fields in the form, the extra field disappears. But if I add that field back, the extra field comes back. I don't really understand why this is happening.

If I put something in the first field (the extra one) along with things with the other fields and then submit the form, no error occurs. Whatever was in the first (extra) field is ignored, and only the stuff in the last two fields actually does something.

There are no error messages, but it is still not working. What should I do?