I am trying to use map in my react redux app. but after using useDispatch, the console is showing error

Question

I am working on an app, but I am getting errors in the console. I am sending the picture of the error, along with the code which causes the error. could anyone tell, me what causes this problem?

import React from 'react';
import { useSelector, shallowEqual } from 'react-redux';
import AddBook from './form';
import SingleBook from './singleBook';


const DisplayBooks = () => {
  const books = useSelector((state) => state.booksArray, shallowEqual);

  return (
    <div className="book-list">
      {books.map((book) => <SingleBook key={book.id} title={book.title} author={book.author} />)}
      <AddBook />
    </div>
  )
};

export default DisplayBooks;

Below I have pasted the console image.

image of the console

Answer 1

I think so this line of code is causing the problem

const books = useSelector((state) => state.booksArray, shallowEqual)

Change it to,

const books = useSelector((state) => state.booksArray)
console.log(books) -> to check whether the books is an array or not