React count value of array and calculate total price - reactjs

Question

The moment an item is selected from the dropdown, the item 'price' of the object is used in the 'countTotalPrice' function. In this function it is the intention that every time an item is selected, the price of the new item is added to the already existing series.
At this time, the function pushes the value to the array, but it constantly overwrites the previous value instead of adding the new value to the previous value.
What I want to achieve is that when someone chooses a treatment and the row is created, all the prices of the created rows are added together to a total amount.
The code:
import React from "react";
import { useState } from 'react';
import { makeStyles } from "#material-ui/core/styles";
import styles from "assets/jss/material-dashboard-react/views/dashboardStyle.js";
import { Container } from "react-bootstrap";
import { Row } from "react-bootstrap";
import { Col } from "react-bootstrap";
import Close from '#material-ui/icons/Close';
import { render } from "react-dom";
const useStyles = makeStyles(styles);
export default function ChaskDesk() {
const employee = ["Robin","Raoul","Joppe "];
const service = [{
id: 1,
name: 'Knippen',
price: 11.00
},
{
id: 2,
name: 'Scheren',
price: 10.00
},
{
id: 3,
name: 'Wassen',
price: 12.00
}]
const counting = [1,2,3,4,5,6];
const gender = ["man", "vrouw", "kind"];
const client = ["Passant"];
const [employeeOrder, setEmployeeOrder] = useState('');
const [serviceOrder, setServiceOrder] = useState([]);
//const serviceOrder = [];
const countingOrder = [];
const genderOrder = [];
const clientOrder = "";
const [payment, setPayment] = useState([]);
//const payment = 0;
const classes = useStyles();
const handelChangeGender = function(event){
genderOrder.push(event.target.value);
};
//this function
const handelChangeService = function(event){
for(var i = 0; i < service.length; i++) {
if (service[i].id == event.target.value) {
setServiceOrder([...serviceOrder,{name: service[i].name, price: service[i].price, id:service[i].id}]);
countTotalPrice(service[i].price);
}
}
};
//this function
const countTotalPrice = function(price){
const counts = [];
counts.push(price);
console.log(counts);
};
const popService = function(event){
setServiceOrder(serviceOrder.filter(item => item.id !== event));
};
const handelChangeEmployee = function(event) {
setEmployeeOrder(event.target.value)
};
return (
<div>
<Container className={classes.containerPixelActive}>
<h3>Afrekenen</h3>
<Row className={classes.tablePixelRow}>
<Col md={8} className={classes.rowChashdesk}>
<form>
<Row>
<Col md={6}>
<label>
Klant:
</label>
<br/>
<select >
{
client.map(function(item, i){
return <option key={i} value={item}>{item}</option>
})
}
</select>
</Col>
</Row>
<Row>
<Col md={6}>
<div className={classes.rowOfForm}>
<label>
Gender:
</label>
<br/>
<select onChange={handelChangeGender}>
{
gender.map(function(item, i){
return <option key={i} value={item}>{item}</option>
})
}
</select>
</div>
</Col>
</Row>
<Row>
<Col md={6}>
<div className={classes.rowOfForm}>
<label>
Behandeling:
</label>
<br/>
<select onChange={handelChangeService}>
{
service.map(function(item){
return <option key={item.id} value={item.id}>{item.name}</option>
})
}
</select>
</div>
</Col>
<Col md={6}>
<div className={classes.rowOfForm}>
<label>
Medewerker:
</label>
<br/>
<select onChange={handelChangeEmployee}>
{
employee.map(function(item, i){
return <option key={i} value={item}>{item}</option>
})
}
</select>
</div>
</Col>
</Row>
{
serviceOrder.map(function(item, i){
console.log(item)
return <Row key={i} >
<Col md={6}>
<div className={classes.rowOfForm}>
<label>
Verkregen behandeling:
</label>
<br/>
<input type="text" name="name" value={item.name}/>
</div>
</Col>
<Col md={2}>
<div className={classes.rowOfForm}>
<label>
Aantal:
</label>
<br/>
<select>
{
counting.map(function(item, i){
return <option key={i} value={item}>{item}</option>
})
}
</select>
</div>
</Col>
<Col md={2}>
<div className={classes.rowOfForm}>
<label>
Prijs:
</label>
<br/>
<input type="text" name="name" value={item.price}/>
</div>
</Col>
<Col md={2}>
<div className={classes.rowIcon}>
<Close size={20} onClick={() => popService(item.id)}></Close>
</div>
</Col>
</Row>
})}
</form>
</Col>
<Col md={3} className={classes.rowChashdesk}>
<h5>Totaal overzicht</h5>
<h6>Medewerker</h6>
<p>{employeeOrder}</p>
<h6>Behandeling</h6>
<ul>
{
serviceOrder.map(function(item, i){
return <li class="listTreatment" key={i}>{item.name}</li>
})
}
</ul>
<h6>Aantal</h6>
<p>{countingOrder}</p>
<h6>Klant</h6>
<p>{clientOrder}</p>
<h6>Te betalen</h6>
<p>{countTotalPrice}</p>
</Col>
</Row>
</Container>
</div>
);
}

Answer 1

Each time the function runs you are making new counts array.
const countTotalPrice = function(price){
const counts = [];
counts.push(price);
console.log(counts);
};
you should declare counts outside this function
please try to decalre it as state
const [counts, setCounts] = useState([]);
//.....
const countTotalPrice = function(price){
let newCounts = counts
newCounts.push(price);
setCounts(newCounts );
console.log(counts);
};