Am getting NaN when I try to get the overall sum (Reactjs) - reactjs

Question

I'm trying to make a function that shows the overall cost of tickets. Adult tickets are $25 each, and minor tickets are $10 each. I have a script that creates the counter, and another script to calculate the sum, but whenever I try to use it to count the overall cost (the second script), it doesn't work, I just get NaN. What am I doing wrong here? Console log doesn't say anything.
function TicketCounter() {
const { useState } = React;
const [counterAdult, setCounter] = useState(0);
const [counterMinor, counterSet] = useState(0);
let adultTickets = [];
let minorTickets = [];
const incrementCounterAdult = () => {
setCounter(counterAdult + 1);
adultTickets.push(counterAdult);
};
const decrementCounterAdult = () => {
if (counterAdult !== 0) {
setCounter(counterAdult - 1);
adultTickets.pop(counterAdult);
}
};
const incrementCounterMinor = () => {
counterSet(counterMinor + 1);
minorTickets.push(counterMinor);
};
const decrementCounterMinor = () => {
if (counterMinor !== 0) {
counterSet(counterMinor - 1);
minorTickets.pop(counterMinor);
}
};
return (
<div className="ticket-options">
<div className="option-adult">
<p>Adult Tickets (16yrs+)</p>
<div className="ticket-amount">
<img
src={'../images/arrowup.png'}
alt="arrow up"
className="arrow-up-adult"
onClick={incrementCounterAdult}
/>
<span className="number-adult">
{counterAdult}
</span>
<img
src={'../images/arrowdown.png'}
alt="arrow down"
className="arrow-down-adult"
onClick={decrementCounterAdult}
/>
</div>
</div>
<div className="option-minor">
<p>Minor Tickets (15yrs-)</p>
<div className="ticket-amount">
<img
src={'../images/arrowup.png'}
alt="arrow up"
className="arrow-up-minor"
onClick={incrementCounterMinor}
/>
<span className="number-minor">
{counterMinor}
</span>
<img
src={'../images/arrowdown.png'}
alt="arrow down"
className="arrow-down-minor"
onClick={decrementCounterMinor}
/>
</div>
</div>
</div>
)
}
ReactDOM.render(<TicketCounter />, document.querySelector(".ticket-counter"));
function TotalCost() {
let overallCost = 0;
let adultCost = () => {
adultTickets.forEach(element => {
adultCost = element * 25;
});
}
let minorCost = () => {
minorTickets.forEach(element => {
minorCost = element * 10;
});
}
overallCost = Number(adultCost) + Number(minorCost);
return(
<div className="option-cost">
<p>Ticket cost: $</p>
{overallCost}
</div>
)
}
ReactDOM.render(, document.querySelector('.cost'));

Answer 1

To get the overall cost you just need to multiply counterAdult and counterMinor and update the value when these counters change:
function TotalCost() {
const [overallCost, setOverallCost] = useState(0);
useEffect(() => {
const newOverall = counterAdult * 25 + counterMinor * 10;
setOverallCost(newOverall);
}, [counterAdult, counterMinor]);
return (
<div className='option-cost'>
<p>Ticket cost: $</p>
{overallCost}
</div>
);
}