Двигаясь вниз в массиве, я получаю TypeError: Невозможно прочитать свойство '0' с нулевым значением

Question

происходит нечто странное. Использование redux для доступа к массиву значений отлично работает на одной странице, но не на другой:

Файл Settings.js, где он работает:

import { connect } from "react-redux";

import { getColors, updateColors } from "../../redux/actions/settingsActions";

const Settings = ({
  setting: { settings, loading },

...

useEffect(async () => {
    M.AutoInit();
    await getColors();

    //eslint-disable-next-line
  }, []);

const colorsArray = settings[0];

console.log(colorsArray);

Settings.propTypes = {
  setting: PropTypes.object.isRequired,
  getColors: PropTypes.func.isRequired,
  updateColors: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  setting: state.settings
});

export default connect(mapStateToProps, { getColors, updateColors })(Settings);

с этим я получаю массив, в котором я могу перемещаться, например:

colorsArray.colors[0].HighPColor

, но если я делаю то же самое в TaskItem.js:

import { connect } from "react-redux";

import { getColors } from "../../redux/actions/settingsActions";

const TaskItem = ({
  setting: { settings },

...

useEffect(() => {
    getColors();
    // eslint-disable-next-line
  }, []);

...

  const colorsArray = settings[0];

  console.log(colorsArray);

...


TaskItem.propTypes = {
  setting: PropTypes.object.isRequired,

  task: PropTypes.object.isRequired,
  deleteTask: PropTypes.func.isRequired,
  setCurrent: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  setting: state.settings
});

export default connect(mapStateToProps, { deleteTask, setCurrent, getColors })(
  TaskItem
);

С этим я получаю "TypeError: Невозможно прочитать свойство '0' с нулевым значением"

Это просто сработает, если я выполню

const colorsArray = settings

, поэтому без [0] выглядит так, будто я не могу перейти в массив.