so i'm doing like a diet app that you put the meal, amount, its carb, protein and fat amount and it creates a list. And there's a box where there's three rounded progress bars, the active value is the percentage of each macronutrient, and the empty bar is the calories. And it is working fine, when i add something, the value goes 20%, add again, goes to 32%, if i take something out, it answer fine. The problem is that let's i have 2 meals, one have 20g of carb, and the other have 0. When i added the first one, the bar went to let's say 30%. When i added the other one, nothing happened. But if i remove de 20g carb meal, the value of the bar don't change at all. Stays like that.

When i take off the second banana, the bar stays the same

I have the carb percentage

const carbPercentage = ((carbSum * 4 * 100) / calorieSum).toFixed(1);

And i tried the ternary operator at the value of the progress bar

<CircularProgressbar
            value={Number(carbPercentage) === 0 ? 1 : Number(carbPercentage)}
            maxValue={totalCarbBar}
            text={carbPercentage + "%"}
            styles={buildStyles({
              pathTransitionDuration: 1,
              pathColor: "#e5383b",
              textColor: "#242423",
              trailColor: "#333533",
            })}
          ></CircularProgressbar>

I deployed it, so you can check it out here https://macro-trackerreact.web.app/ And here's the git repository https://github.com/JosephKorel/macro-count