Как сделать правильное отображение данных при сортировке в React?

Сергей Сунцев, Я пробую даже отобразить данные моего нового полученного массива list_copy.books_copy и вывести к примеру в теги какой-нибудь массив с данными например Название книги: {list_copy.books_copy[2016][0].Name} и если обновить страницу то выскочит ошибка TypeError: Cannot read property '0' of undefined но если сначала закомментировать строчку и оставить так Название книги: а когда станица отобразится то добавить изначальный тег с данными Название книги: {list_copy.books_copy[2016][0].Name} то все будет успешно и появится сообщение Название книги JavaScrupt, а если снова обновить страницу то опять будет ошибка TypeError: Cannot read property '0' of undefined Я что делаю не так мне кажется что не успевает выполниться процесс сортировки моих функций и из-за этого он не понимает что за данные. Я пробовал добавить состояние и поставить loading и когда выполниться процесс всех функций то отобразить его но это тоже не помогло

import React, { useEffect, useState } from 'react'
import firebase from '../../firebase';
import {Link, useHistory} from 'react-router-dom';
const MainPage = () => {

    const [books1, setBooks] = useState([])
    const [loading, setLoading] = useState(false)
    let history = useHistory();

    const ref = firebase.firestore().collection('books1');

    const getBooksList = () => {
        ref.onSnapshot((querySnapshot)=> {
            const list = [];
            querySnapshot.forEach((doc)=>{
                list.push(doc.data());
            });
            setBooks(list)
        })
    };

    const deleteBook = (id) => {
        ref
            .doc(id)
            .delete()
            .catch((err) =>{
                console.error(err);
            })
    }

    const editBook = (id) => {
        history.push('/editbook/' + id)
    }



    useEffect(() => {
        getBooksList();
    }, [])

    let list_copy = {
        books_copy:{
    
        }
    }


    let year = []

    //сортируем года по возрастанию
    const sort = () => {
      for(let i = 0; i < books1.length; i++){
          books1[i].Year = Number(books1[i].Year)
      }
      books1.sort((a, b) => a.Year > b.Year ? 1 : -1);
  }
  sort()

//создаем отдельный массив под года
  const year_array = () => {
  for(let i = 0; i < books1.length; i++){
    year.push(books1[i].Year)
  }
  year = year.filter((item, index) => year.indexOf(item) === index) //удаляем дубликаты
}

year_array()


const sort_year = () =>{
  for(let i = 0; i < year.length; i++){
    list_copy.books_copy[year[i]] = []
  }
  for(let i = 0; i < year.length; i++){
    for(let j = 0; j < books1.length; j++){
      if(books1[j].Year == year[i]){
        list_copy.books_copy[year[i]].push(books1[j])
      }
    }
  }
}

sort_year()


//сортировка по имени

function sort_name(){
  for(let j = 0; j < Object.keys(list_copy.books_copy).length; j++){
    list_copy.books_copy[year[j]].sort((a, b) => a.Name.localeCompare(b.Name));
  }
  setLoading(true)
}
sort_name()



    return(
        <>
        {loading ? 
        <div>
            <p>Название книги: {list_copy.books_copy[2016][0].Name}</p>
            {/* {.map((c) =>(
                <div key={c.id}>
                    <p>Год: </p>
                    <div>
                        <h5>{c.Name}</h5>
                        <p>Автор: {c.Author}</p>
                        <p>Год публикации: {c.Year}</p>
                        <p>Рейтинг: {c.Raiting}</p>
                        <p>ISBN: {c.ISBN}</p>
                        <button onClick={() => deleteBook(c.id)}>Удалить</button>
                        <button onClick={() => editBook(c.id)}>Изменить</button>
                    </div>
                </div> */}
        </div>
        : <div>Loading...</div>
            }
        </>
    )
}

export default MainPage;