Map is not a function quando clico no botão de voltar em uma página redirecionada no React

Eu tenho uma página chamada MyNotes que mostra todas as notas de um usuário específico. Quando um botão é pressionado para visualização de detalhes o usuário é redirecionado para outra página (NoteDetail) onde estou passando o id específico dessa nota. Na página de redirecionamento com ajuda do id eu chamo uma api e preencho os dados. Mas agora, se o usuário clica no botão Voltar para a página anterior (MyNotes.js), recebo o erro abaixo:

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)

Os códigos das páginas que eu mencionei:

MyNotes

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 Esta é a página que contém a função para redirecionar

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

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;

Como eu consigo resolver esse erro?

Para conseguir voltar em uma página redirecionada no React você primeiro precisa checar se as notas não são undefined.

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

notese notes.length checam se as notas existem e se existe algo dentro do array delas. Já o operador ternário ou retorna uma função map das notas ou retorna uma mensagem dizendo que nenhuma nota foi encontrada.