import React from "react";
import { useContext } from "react";
import styled from "styled-components";
import { GlobalContext } from "../context/GlobalState";
import IncomeTransactions from "./IncomeTrasactions";

function Head() {

In this part, I draw a month and a year

  let months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ];
  let mY = new Date();
  let monthName = months[mY.getMonth()];
  const current = new Date();
  const date = `${current.getFullYear()}`;
  const { incomeTransactions, expenseTransactions } = useContext(GlobalContext);

  const incomeAmounts = incomeTransactions.map(
    (incomeTransaction) => incomeTransaction.incomeAmount
  );
  const expenseAmounts = expenseTransactions.map(
    (expenseTransaction) => expenseTransaction.expenseAmount
  );

In this section, I get an error "expenseAmounts.reduce(...).toFixed is not function"

const totalIncome = incomeAmounts
    .reduce((acc, item) => (acc += item), 0)
    .toFixed(2);

  const totalExpense = expenseAmounts
    .reduce((acc, item) => (acc += item), 0)
    .toFixed(2);

The code below is ok and everything works, the problem is somewhere I marked it return ( Available Budget in {monthName} {date}

{totalIncome - totalExpense}.00

            <div>+ {totalIncome}</div>
          </div>
          <div className="expenses-top mt-3">
            <div>Expenses</div>

            <div>- {totalExpense}</div>
          </div>
        </BlockHeader>

        <ImageHeader src="/img/header-budget.png" />
      </Wrap>
    </div>
  );
}

export default Head;