Problem with my task tracker app

On my app react-task-tracker-app
my tasks will not show up or save onto my server with json
import { useState, useEffect } from 'react'
import Header from './componets/Header'
import Tasks from './componets/Tasks'
import AddTask from './componets/AddTask'

const App = () => {
const [showAddTask, setShowAddTask] = useState(false)
const [tasks, setTasks] = useState([])

useEffect(() => {

const getTasks = async () => {
const tasksFromServer = await fetchTasks()
setTasks(tasksFromServer)

}

getTasks()

}, [])

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

console.log(data)

}

const fetchTask = async (id) => {
const res = await fetch(http://localhost:5000/tasks/${id})
const data = await res.json()

return data

}

const addTask = async (task) => {

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



const data = await res.json()
setTasks([...tasks, data])
const id = Math.floor(Math.random() * 10000) + 1
const newTask = { id, ...task }
setTasks([...tasks, newTask])

}

const deleteTask = async (id) => {

await fetch(`http://localhost:5000/Tasks/${id}`, {
  method: 'Delete'
})

setTasks(tasks.filter((task) => task.id !== id))

}

const toggleReminder = async (id) => {
const taskToToggle = await fetchTask(id)
const updTask = {
...taskToToggle,
reminder: !taskToToggle.reminder
}

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

setTasks (
  tasks.map((task) =>
    task.id === id ? {
      ...tasks, reminder:
        !data.reminder
    } : task
  )

)

}

return (

<Header onAdd={() => setShowAddTask
(!showAddTask)} showAdd={showAddTask}
/>
{showAddTask && }
{
tasks.length > 0 ?
: 'No tasks to show'
}

</div>

);

}
export default App