Why is use-effect not working on React/django? [duplicate]

I am building a ToDo list web application with Django/React and now got into a minor problem I cannot seem to figure out. The problem is the note I am setting on my main page is not showing up when I click that current todo task. The terminal reads something like this "React Hook useEffect has a missing dependency: 'getNote'. Either include it or remove the dependency array." Can anyone pinpoint the error for me and tell me why its not working! Am I failing to see something?

import React, {useState, useEffect} from 'react'
import { useParams } from "react-router-dom"


const NotePage = ({ history }) => {

    let [note, setNote] = useState(null)
    let { id }  = useParams()

    useEffect(() => {
        getNote()
    }, [id])

     let getNote = async () => {

        let response = await fetch(`/api/notes/${id}/`)
        let data = await response.json()
        setNote(data)
    }

    return (
        <div className="note">
            <textarea defaultValue={note?.id}></textarea>
        </div>
    )
}

I recently upgraded from React v5 to v6 and learning how to use the new module. But this is a bit confusing. I did use it before and it worked perfectly but now for the application, it is throwing a error.

Back to Top