Gettting “Uncaught TypeError: Cannot read properties of undefined (reading ‘map’)”

I have my app component

import './App.css';
import Header from './components/Header'
import { useState } from 'react'
import Tasks from './components/Tasks';


const App = ()=> {
  const [tasks, setTasks] = useState([
    {
        id:1,
        text: 'Task 1',
        day:'every',
        reminder: true
    },
    {
        id:2,
        text: 'Task 2',
        day:'every',
        reminder: true
    },
    {
        id:3,
        text: 'Task 3',
        day:'every',
        reminder: false
    }
]);
  return (
    <div className="App">
      <Header/>
      <Tasks tasks={tasks}/>
    </div>
  );
}

export default App;

and then my Tasks component

const Tasks = ({ tasks }) => {
  return (
    <>
      {tasks.map((task) => (
        <h3 key={task.id}>{task.text}</h3>
      ))}
    </>
  )
}
export default Tasks;

For some reason, it does not seem to like me passing my destructured tasks prop into my Tasks component. I tried adding prop types for Tasks and passing props as a parameter instead of tasks and mapping props.tasks but it still gave me the same error.