How can i solve this issue ? TypeError: Cannot read properties of undefined (reading 'map') in react.js

Hierarchy Structure Picture : https://prnt.sc/1y2ply6

notes.js(file) :

const notes = [
    {
      _id: "1",
      title: "Day 1 of college",
      content:
        "I made a few new friends and introduced myself to a lot of new teachers.",
      category: "College",
    },
    {
      _id: "2",
      title: "Learned some Node JS",
      content: "Learned how to create a server in node JS and my first API",
      category: "Learning",
    },
    {
      _id: "3",
      title: "Watched some Anime",
      content: "Finished 2 seasons of Attack on Titan and My Hero academia.",
      category: "Entertainment",
    },
    {
      _id: 4,
      title: "Started React JS",
      content:
        "Made my first App in React JS, feels awesome to learn something new. I aim to be a full stack dev someday",
      category: "Learning",
    },
  ];
  
  module.exports = notes;

MyNotes.js(file)

import React from 'react'
import { Link } from 'react-router-dom'
import { Accordion, Badge, Button, Card } from 'react-bootstrap'
import MainScreen from '../../components/MainScreen'
import { notes } from '../../data/notes.js'

const MyNotes = () => {

    const deleteHandler = (id) => {
        if(window.confirm("Are you sure?")){
             
        }
    }
    return (
        <MainScreen title='Welcome Deepak Sarkar'>
           <Link to="/createnote">
               <Button style={{ marginLeft: 10, marginBottom: 6, size:"lg"}}>
                   Create New Note
               </Button>
            </Link>
               {
                   notes.map((note) => (
                    <Accordion>
                        <Card style={{ margin: 10 }}>
                   <Card.Header style={{ display:"flex" }}>
                       <span style={{
                           color:"black",
                           textDecoration:"none",
                           flex:1,
                           cursor:"pointer",
                           alignSelf:"center",
                           fontSize:18
                       }}> 
                       <Accordion.Toggle as={Card.Text} variant='link' eventKey="0">
                           {note.title} 
                        </Accordion.Toggle>
                        </span>
                   <div>
                       <Button href={`/note/${note._id}`}>Edit</Button>
                       <Button 
                        variant='danger' 
                        className="mx-2"
                        onClick={() => deleteHandler(note._id)}>Delete</Button>
                   </div>
                    
                   </Card.Header>
                   <Accordion.Collapse eventKey="0">
                   <Card.Body>
                    <h4><Badge variant="success">
                        Category - {note.category} 
                    </Badge></h4>
                    <blockquote className="blockquote mb-0">
                  <p>{note.content}</p>
                 <footer className="blockquote-footer"> Created on -date </footer>
                </blockquote>
                </Card.Body>
                </Accordion.Collapse>
               </Card>
                    </Accordion>
                  
                   ))
               }
        </MainScreen>
    )
}

export default MyNotes

if i remove "{}" from import { notes } from '../../data/notes.js' and add export default notes in notes.js i get this error : Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of MyNotes.

can anyone help me solve this please ?