I am making a calculation application with React.
When I tried to use the map method on an array of objects, I got the following message:

TypeError: incomeItems.map is not a function

IncomeExpense.js

import React from'react';
export const IncomeExpense = (incomeItems, expenseItems) =>{
  const incomeAmounts = incomeItems.map(incomeItem =>incomeItem.amount);
  const incomeTotal = incomeAmounts.reduce((acc, cur) =>{
    return acc = acc + cur;
  });
  return (
    
      
        Income
      <p>{incomeTotal}</p>
      
      
        Expense
      <p>-5,000 yen</p>
      
    
  )
}

AddItem.js
The state is set here.

import React, {useState} from'react';
export const AddItem = ({ inputText, setInputText, inputAmount, setInputAmount, incomeItems, setIncomeItems, expenseItems, setExpenseItems, type, setType}) =>{

  const typeHandler = (e) =>{
    setType(e.target.value)
    console.log(type)
  }
  const inputTextHandler = (e) =>{
    setInputText(e.target.value);
    console.log(inputText)
  };
  const inputAmountHandler = (e) =>{
    setInputAmount(e.target.value)
    console.log(inputAmount)
  }
  const submitItemHandler = (e) =>{
    e.preventDefault();
    if (type ==='inc') {
      setIncomeItems((
      ...incomeItems, {text: inputText, amount:inputAmount, id: Math.random() * 1000}
      ]);
    } else if (type ==='exp') {
      setExpenseItems((
        ...expenseItems, {text: inputText, amount:inputAmount, id: Math.random() * 1000 }.
      ]);
    }
    console.log(incomeItems)
  }
  return (
  <>
    <form>
      <select onChange={typeHandler}>
        <option value="inc">＋</option>
        <option value="exp" >-</option>
      </select>
      <label>Text</label>
      <input type="text" placeholder="Text" value={inputText} onChange={inputTextHandler} />
      <label>Amount</label>
      <input type="number" placeholder="Value" value={inputAmount} onChange={inputAmountHandler} />
      <button type="submit" onClick={submitItemHandler}>Add</button>
    </form>
  </>
  )
}

Home.js

import React, {useState} from'react';
import {app} from "../firebase/Firebase";
import {Header} from'./Header';
import {Balance} from'./Balance';
import {IncomeExpense} from'./IncomeExpense';
import {AddItem }from'./AddItem';
import {ItemsList} from'./ItemsList';
function Home (props) {
  const [inputText, setInputText] = useState("");
  const [inputAmount, setInputAmount] = useState(0);
  const [incomeItems, setIncomeItems] = useState([]);
  const [expenseItems, setExpenseItems] = useState([]);
  const [type, setType] = useState("inc");
  return (
    
    <Header />
    <Balance />
    <IncomeExpense
        incomeItems={incomeItems}
        expenseItems={expenseItems}
      />
      
    <ItemsList
        incomeItems={incomeItems}
        setIncomeItems={setIncomeItems}
        expenseItems={expenseItems}
        setExpenseItems={setExpenseItems}
      />
    <button onClick={() =>app.auth().signOut()}>log out</button>
    
  )
}
export default Home;

I have passed incomeItems as props from the main.
Why can't I use it even though it is an object array?