Getting map is not a function after pressing back button from a redirected page in react.js

I have page (MyNotes.js) that show all the notes specific for that user. So when a button is pressed for detail view the user is redirected to another page (NoteDetail.js) where I am passing the id specific of that specific note. In redirect page with help of the id I call an api and populate the data. But now if user presses the back button to the previous page (MyNotes.js) I get the below error

MyNotes.js:30 Uncaught TypeError: notes.map is not a function
    at MyNotes (MyNotes.js:30:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
    at performUnitOfWork (react-dom.development.js:22776:1)
    at workLoopSync (react-dom.development.js:22707:1)

These are the codes of the pages I mentioned above

MyNotes.js

import React, { useEffect, useContext } from "react";
import { useNavigate } from "react-router-dom";
import Noteitem from "../components/NoteItem";
import AuthContext from "../context/AuthContext";
import noteContext from "../context/NotesContext";

const MyNotes = () => {
  const context = useContext(noteContext);
  const { user, authtoken } = useContext(AuthContext);
  const { notes, getNotes } = context;
  const navigate = useNavigate();

  useEffect(() => {
    if (user) {
      getNotes();
    } else {
      navigate("/login");
    }
    // eslint-disable-next-line
  }, []);

  return (
    <>
      <div className="container my-4">
        <h1>Hello {user.name}</h1>
      </div>

      <div className="row my-2">
        <h1>Your Notes</h1>
        <div className="container">
          {notes.length === 0 && "No Notes to display"}
        </div>
        {notes.map((notes) => {
          return <Noteitem key={notes.id} note={notes} />;
        })}
      </div>
    </>
  );
};

export default MyNotes;

NoteItem.js This is page that contains the function to handle the redirection

import React, { useContext, useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import noteContext from "../context/NotesContext";
import NoteDetail from "../pages/NoteDetail";

const NoteItem = (props) => {
  const { note } = props;
  const { deleteNote } = useContext(noteContext);
  const navigate = useNavigate();

  const toDetailPage = () => {
    navigate(`/notedetail/${note.id}`, { state: { id: note.id } });
  };

  return (
    <div className="col-md-3">
      <div className="card">
        <div className="card-body">
          <div className="d-flex align-items-center">
            <h5 className="card-title">{note.title}</h5>
            <i
              className="fas fa-trash-alt mx-2 delete"
              onClick={() => {
                deleteNote(note.id);
              }}
            ></i>
            <i className="far fa-edit mx-2 edit"></i>
          </div>
          <p className="card-text"> Tags: {note.tags}</p>
          <button
            onClick={() => {
              toDetailPage();
            }}
            className="btn btn-primary"
          >
            Read Note
          </button>
        </div>
      </div>
    </div>
  );
};

export default NoteItem;

NoteDetail.js

import React, { useContext, useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import noteContext from "../context/NotesContext";

const NoteDetail = () => {
  const { notes, noteDetail } = useContext(noteContext);

  const location = useLocation();

  const { id } = location.state;

  useEffect(() => {
    noteDetail(id);
    console.log("This is note recieved in NoteDetail.js", notes);
  }, [id]);

  return (
    <div className="container">
      <p>{notes.id}</p>
      <p> {notes.title} </p>
      <p> {notes.description} </p>
      <p> {notes.tags} </p>
    </div>
  );
};

export default NoteDetail;

Please suggest me what shuld I do to rectify this error

>Solution :

Simply check if notes are not undefined.

  {notes && notes.length? notes.map((notes) => {
          return <Noteitem key={notes.id} note={notes} />;
        }) : <p>No notes found!</p>}

notes && notes.length are checkinf if notes exist and if it has anything in its array. And then the ternary operator either maps data, or returns no data found