Return NaN - reactjs - reactjs

Question

Good evening, have a question. I am starting to use react making a project with sponacular api. I have this code:
import Container from 'react-bootstrap/Container';
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import Row from 'react-bootstrap/Row';
import ListGroup from 'react-bootstrap/ListGroup';
import { useContext } from 'react';
import { CartContext } from '../../CartContex/CartContext';
import "./CartOrden.css";
const CartOrden =()=>{
const {pedidoVegano, pedidoNoVegano, removeItem } = useContext(CartContext);
let totalPrecio = 0;
let tiempoEspera = 0;
let healthScore = 0;
const sumarTotal =(i)=>{
totalPrecio += i.pricePerServing;
console.log(totalPrecio)
}
const calculoEspera =(i)=>{
tiempoEspera += parseInt(i.readyInMinutes);
console.log(tiempoEspera)
}
const totalHealth = (i)=>{
healthScore += i.healthScore;
console.log(healthScore)
}
return (
<Container>
<div>
<h2>Vegan Menu</h2>
</div>
<Row className='m-3'>
{pedidoVegano.map((i=>{
sumarTotal(i.item)
calculoEspera(i.item)
totalHealth(i.item)
return(
<Card className='card-first' style={{ width: '18rem' }}>
<Card.Img className='card-img' variant="top" src={i.item.image} />
<Card.Body>
<Card.Title className='card-title'>{i.item.title}</Card.Title>
<div className='contain-value'>
<p className='text'><i className="fa-solid fa-dollar-sign"></i> {i.item.pricePerServing}</p>
<p className='text'><i className="fa-solid fa-heart"></i> {i.item.healthScore}</p>
<p className='text'><i class="fa-solid fa-clock"></i> {i.item.readyInMinutes}</p>
</div>
<div>
<Button onClick={()=> removeItem(i.item)} variant="danger"><i class="fa-solid fa-trash"></i> Delete</Button>
</div>
</Card.Body>
</Card>
)
}))}
</Row>
<div>
<h2>Vegan't Menu</h2>
</div>
<Row className='m-3'>
{pedidoNoVegano.map((i=>{
sumarTotal(i.item)
calculoEspera(i.item)
totalHealth(i.item)
return(
<Card className='card-first' style={{ width: '18rem' }}>
<Card.Img className='card-img' variant="top" src={i.item.image} />
<Card.Body>
<Card.Title>{i.item.title}</Card.Title>
<div className='contain-value'>
<p className='text'><i className="fa-solid fa-dollar-sign"></i> {i.item.pricePerServing}</p>
<p className='text'><i className="fa-solid fa-heart"></i> {i.item.healthScore}</p>
<p className='text'><i class="fa-solid fa-clock"></i> {i.item.readyInMinutes}</p>
</div>
<div>
<Button onClick={()=> removeItem(i.item)} variant="danger"><i class="fa-solid fa-trash"></i> Delete</Button>
</div>
</Card.Body>
</Card>
)
}))}
</Row>
<Row className='m-3'>
<Card>
<Card.Header as="h5">Current Menu</Card.Header>
<Card.Body>
<Card.Title>Total price: {totalPrecio}</Card.Title>
<Card.Title>Total health score: {healthScore} </Card.Title>
<Card.Title>Total preparation time: {tiempoEspera} minutes </Card.Title>
</Card.Body>
</Card>
</Row>
</Container>
)
}
export default CartOrden;
I wanted to unstructure the previous code, to make it more complex and work with components, as it should.
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import { useContext } from 'react';
import { CartContext } from '../../CartContex/CartContext';
import "./CartOrden.css";
const CartOrden =({i})=>{
const { removeItem } = useContext(CartContext);
return(
<Card className='card-first' style={{ width: '18rem' }}>
<Card.Img className='card-img' variant="top" src={i.item.image} />
<Card.Body>
<Card.Title className='card-title'>{i.item.title}</Card.Title>
<div className='contain-value'>
<p className='text'><i className="fa-solid fa-dollar-sign"></i> {i.item.pricePerServing}</p>
<p className='text'><i className="fa-solid fa-heart"></i> {i.item.healthScore}</p>
<p className='text'><i class="fa-solid fa-clock"></i> {i.item.readyInMinutes}</p>
</div>
<div>
<Button onClick={()=> removeItem(i.item)} variant="danger"><i class="fa-solid fa-trash"></i> Delete</Button>
</div>
</Card.Body>
</Card>
)
}
export default CartOrden;
import Container from 'react-bootstrap/Container';
import Card from 'react-bootstrap/Card';
import Row from 'react-bootstrap/Row';
import { useContext } from 'react';
import { CartContext } from '../../CartContex/CartContext';
import CartOrden from '../CartOrden/CartOrden';
const ResultOrden =()=>{
const {pedidoVegano, pedidoNoVegano, } = useContext(CartContext);
let totalPrecio = 0;
let tiempoEspera = 0;
let healthScore = 0;
const sumarTotal =(i)=>{
totalPrecio += i.pricePerServing;
console.log(totalPrecio)
}
const calculoEspera =(i)=>{
tiempoEspera += parseInt(i.readyInMinutes);
console.log(tiempoEspera)
}
const totalHealth = (i)=>{
healthScore += i.healthScore;
console.log(healthScore)
}
return (
<Container>
<div>
<h2>Vegan Menu</h2>
</div>
<Row className='m-3'>
{pedidoVegano.map((i=>{
sumarTotal(i)
calculoEspera(i)
totalHealth(i)
return(
<CartOrden i={i} key={i.pricePerServing}/>
)
}))}
</Row>
<div>
<h2>Vegan't Menu</h2>
</div>
<Row className='m-3'>
{pedidoNoVegano.map((i=>{
sumarTotal(i)
calculoEspera(i)
totalHealth(i)
return(
<CartOrden i={i} key={i.id}/>
)
}))}
</Row>
<Row className='m-3'>
<Card>
<Card.Header as="h5">Current Menu</Card.Header>
<Card.Body>
<Card.Title>Total price: {totalPrecio}</Card.Title>
<Card.Title>Total health score: {healthScore} </Card.Title>
<Card.Title>Total preparation time: {tiempoEspera} minutes </Card.Title>
</Card.Body>
</Card>
</Row>
</Container>
)
}
export default ResultOrden;
I wanted to know why in the first case the code works but in the second within ResultOrden, the healthScore, tiempoEspera and totalPrice returns NaN.
example image
Sorry if the question is basic, I was trying to solve it and I couldn't. I'm probably missing something about communication between components but couldn't find it. If anyone can give me some advice, I'd appreciate it.