I might be missing something, but after struggling a bit, I followed a tutorial showing the basics of props. My prop is passing, but all my variables are returning as undefined. Im trying to pass my calculations to a component to display the total.

My calculation component (IncomeAndexpenses.js)

import {useState, useEffect} from 'react';
import HeadSection from '../HeadSection';

const IncomeVals = () => { 
    
    const [TotIncome, settotIncome] = useState(0);
    const [totTaxBrackets ,settotTaxBrackets] = useState(0);
    const [AvValues ,setAvValues] = useState();

const Users= [{
    name: 'Johan Golden', salary: 60000
}, {
    name: 'Susan Golden', salary: 27000
}
]

const expenses= [{
    name: 'Johan Golden', salary: 60000
}, {
    name: 'Susan Golden', salary: 27000
}
]

useEffect(() => {

    let totalIcome = 0;
    let totalIcomeTax = 0;

    Users.forEach(element => {
        totalIcome += element.salary;
      });

    console.log(totalIcome);

    settotIncome(totalIcome);

    //taxBrackets
    totalIcome = totalIcome * 12;

    console.log(totalIcome);

}, []);

    return (
        <>
            <HeadSection name="josh" totalIncome = {TotIncome}/>
        </>

    )
}

export default IncomeVals;

And then displaying on this component (HeadSection)

import React from "react";

const HeadSection = (props) => {

    console.log(props.name);

    return (
        <div className='SectionOne'>
            <hr></hr>
            <div className='subSections'>
                <div className='subSection'><h3>Total Income</h3><br></br><h2>R{props.totalIncome}</h2></div>
                <div className='subSection'><h3>Total Expenses</h3><br></br><h2>R13 327</h2></div>
                <div className='subSection'><h3>Total Income after tax</h3><br></br><h2>R65 560</h2></div>
            </div>
            <hr></hr>
        </div> 
    )
}

export default HeadSection;

Any help would be much appreciated!