Why is my input not displayed correctly althought it's correct in the database

Question

I have 3 Components. In GoalOverview.js you will find all the functions for fetching the data. In GoalItem.js you find all elements like inputfields. In GoalNote.js you find the specific GoalNote Component. When I submit something in the GoalNote Input-field, it's saved correctly in the db.json but not displayed when I refresh the site. Also all Input-fields get the same Input which also shouldn't be the case- i'm sure that I have to pass the goal.id in GoalNote.js but i'm not sure how to do it.

GoalOverview.js

import React, {useState, useEffect} from 'react'
import Button from './Button'
import GoalItems from './GoalItems'
import DropDownMenu from "./DropDownMenu"
//import { AiFillGold } from 'react-icons/ai'
import CompletedLevelPopUp from './CompletedLevelPopUp'




const GoalsOverview = ({setNextLevelOpen}) => {


  const [editLevel, setEditLevel] = useState(true)

  const [goalItems, setGoalItems] = useState ([])

  const [openPopup, setOpenPopup] = useState (false)

 // const [note, setNote] = useState('')




  


  
  



  useEffect (() => {
     const  getGoalItems = async () => {

        const goalItemsFromServer = await fetchGoalItems()
        setGoalItems(goalItemsFromServer)
      }

    getGoalItems()

  }, [])



  useEffect (() => {

     // goalItems.completed.every(Boolean).console.log
        
    var completedItems = []
    goalItems.forEach(g => g.completed === true | completedItems.push(g.completed))
    console.log(completedItems)

    if(completedItems.length > 0){
      
      function allCompl(element) {
        return element === true
        
      }
    completedItems.every(allCompl) ? setOpenPopup (true) :  setOpenPopup(false)
    
    }
  }, [goalItems])


  // Fetch Goals

  const fetchGoalItems = async () => {
    const res = await fetch ('http://localhost:5000/goalItems') 
    const data = await res.json()

    return data
  }


  //Fetch Goal
  const fetchGoal = async (id) => {
    const res = await fetch (`http://localhost:5000/goalItems/${id}`) 
    const data = await res.json()

    return data
  }



const addGoal = async (goal) =>{ 

  const res = await fetch (`http://localhost:5000/goalItems`, {
   method:'POST',
   headers:{
     'Content-type': 'application/json'
   },
   body: JSON.stringify(goal)
  })

  const data= await res.json ()
  setGoalItems([...goalItems, data])

 /* const id = Math.floor(Math.random() * 1000) +1 

  const newGoalItem = { id, ...goal}
  setGoalItems ([...goalItems, newGoalItem])
*/
}

const deleteGoal = async (id) => {
  await fetch(`http://localhost:5000/goalItems/${id}`, {
    method: 'DELETE'
  })

  setGoalItems(goalItems.filter((goal) => goal.id !== id)) 
  
}



const toggleChecked = async (id) =>{


  const goalToToggle = await fetchGoal(id) 
  const updatedGoal = {...goalToToggle, completed : !goalToToggle.completed}

  const res = await fetch (`http://localhost:5000/goalItems/${id}`, {
    method: 'PUT',
    headers: {
      'Content-type': 'application/json',
    },
    body: JSON.stringify(updatedGoal)
  }) 

  const data = await res.json()


  setGoalItems(goalItems.map((goal)=> goal.id === id

  ? {...goal, completed: data.completed} : goal
        
))}


  


const noteSaveJson = async (note, id) => {


  const goalToSaveNote = await fetchGoal(id) 
  const updatedGoal = {...goalToSaveNote, note : note}
  console.log(`funktion saveNote in GoalsOverview: ${note}`)


  const res = await fetch (`http://localhost:5000/goalItems/${id}`, {
    method: 'PUT',
    headers: {
      'Content-type': 'application/json',
    },
    body: JSON.stringify(updatedGoal)
  }) 

  const data = await res.json ()
  
  
  setGoalItems(goalItems.map((goal)=> goal.id === id

  ? {...goal, note: data.note} : goal
  
  )) 

 }



  return (
    <header className='header'>
        <h1>Deine Ziele</h1>
        {editLevel && <DropDownMenu onAdd={addGoal}/> }
        <GoalItems goalItems={goalItems} onDelete={deleteGoal} onToggle={toggleChecked} editLevel={editLevel} onSaveNote={ noteSaveJson}/>
        {editLevel && <Button text='Level starten'onClick={()=> setEditLevel(!editLevel)} />}
        {openPopup ? <CompletedLevelPopUp onClose={closeCompletedLevelPopup } setNextLevelOpen={setNextLevelOpen}/> : ''}
    </header>
  )
}

export default GoalsOverview

GoalItem.js

import React, {useState} from 'react'
//import GoalItemBox from './GoalItemBox'
import {FaTimes} from 'react-icons/fa'
import {AiFillCheckCircle} from 'react-icons/ai'
import GoalNote from './GoalNote'



const GoalItems = ({goalItems, onDelete, onToggle, editLevel, onSaveNote}) => {

    const [note, setNote] = useState('')
  


    return (
        <>

        {goalItems.map((goal, index)=>( 
       // <GoalItemBox key={goal.id} goal={goal} onDelete={onDelete} onToggle={onToggle}/>))}
       <div key={index} className= {`goalItemBox ${goal.completed ? 'completed' : ''}`} onDoubleClick={()=>onToggle(goal.id)}> 
       {goal.completed ? <AiFillCheckCircle/> : ''}
       <h3>{goal.text} {editLevel && <FaTimes style={{color: 'red'}} onClick={()=> onDelete(goal.id)}/>} </h3>
       <GoalNote note={note} setNote={setNote} onSave={()=>onSaveNote(note, goal.id)}/>
       <button type='safe'>Submit</button>

       
          
       </div>))
       
       }
        </>
    )
}

export default GoalItems

GoalNote.js

import React, {useState} from 'react'


const GoalNote = ({onSave, note, setNote}) => {

    

    const onSubmit =(e) =>{ 
        e.preventDefault();

        onSave({note});
        console.log(`note submitted: ${note}`)
        
        
    }

    return (
        <form onSubmit={onSubmit}>
        <div>
          <textarea title="Note" 
                    type ="text" 
                    value= {note}
                    onChange= {(e)=> setNote(e.target.value)}
                    placeholder='Füge hier Notizen, Ideen, Pläne ein'      
          />
          <button type='safe'>Submit</button>
        </div>
        </form>
    )
}

export default GoalNote