i'm a newbee still flirting around reactjs. why do i get this error anytime i trying displaying the array content of tasks. this is my App.js

import React from 'react';
import { useState } from 'react'
import './index.css';
import Navbar from './components/layout/Navbar';
import Tasks from './components/Tasks';
// import Message from './components/Message';
// import FunctionClick from './components/FunctionClick';

const App = () => {
  const [tasks, setTasks] = useState([
    {
      id: 1,
      text: 'This is the first text',
      day: 'Feb 5th at 2:30pm',
      reminder: true,
    },
    {
      id: 2,
      text: 'Meeting at School',
      day: 'Feb 6th at 1:30pm',
      reminder: true,
    },
    {
      id: 3,
      text: 'third meeting',
      day: 'Feb 6th at 1:30pm',
      reminder: true,
    },
  ])
 
  return (
    <div className="container">
      <Navbar />
      <Tasks tasks={tasks}/>
    </div>
  
  );

}

export default App;

and this is my Tasks.js

import React from 'react'
import  Task  from './Task'

const Tasks = ({tasks}) => {
  
  return (
    <>
    {tasks.map((task) => (
    <Task key={task.id} task={task} />
    ))}
    </>
  )
}

export default Tasks

Task.js

import React from 'react'

export const Task = ({task}) => {
  return (
    <div className='task'>
        <h3>{task.text}
        </h3>
    </div>
  )
}

export default Task;

it doesn't show error in the console but shows in the browser. i've been stuck. help me please. you can try testing it on your app. thanks