Context api values reading NaN when used for calculation in a function but returns as a number when logged to the console individually

I’m trying to get the percent of a number using numbers gotten from an api endpoint which I saved globally using context api but each time I pass the number to the function doing the calculation it returns NaN but when I log the inputs used for the calculation on the console it shows the actual numbers.

import React, { createContext, useState, useContext } from "react";
import { FormatNum } from "../utils/FormatNum";
import { useFetchUsersData } from "../hooks/useFetchUsersData";

const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const onError = (error) => {
    console.log("Error:", error);
  };

  const enabled = true;
  const endpoint = "growthData";
  const { data } = useFetchUsersData({ endpoint, enabled, onError });

  const totalUser = data?.data.reduce((accumulator, currentItem) => {
    return accumulator + currentItem.users;
  }, 0);

  const totalActiveUsers = data?.data.reduce((accumulator, currentItem) => {
    return accumulator + currentItem.activeUsers;
  }, 0);

  const [totalUsers, setNumberOfUsers] = useState(Number(totalUser));
  const [activeUsers, setActiveUsers] = useState(Number(totalActiveUsers));
  const [percentActiveUsers, setPercentActiveUsers] = useState(0);

  const calculatePercent = (total) => {
    console.log("value:", total);
    if (total && total > 0) {
      return (activeUsers / totalUsers) * 100;
    }
    return 0; // Return 0 if totalUsers is not valid or zero to avoid NaN
  };

  const updateNumberOfUsers = (newNumber) => {
    setNumberOfUsers(FormatNum(newNumber));
  };

  const updateActiveUsers = (newNumber) => {
    setActiveUsers(FormatNum(newNumber));
  };

  const updatePercentActiveUsers = (newNumber) => {
    setPercentActiveUsers(FormatNum(newNumber));
  };

  return (
    <UserContext.Provider
      value={{
        totalUsers,
        updateNumberOfUsers,
        activeUsers,
        updateActiveUsers,
        percentActiveUsers,
        updatePercentActiveUsers,
        calculatePercent,
      }}
    >
      {children}
    </UserContext.Provider>
  );
};

// Custom hook to use the UserContext
export const useUserContext = () => {
  return useContext(UserContext);
};

This is were I’m passing in my data from because every other thing I tried didn’t work

import React from "react";
import { HiOutlineUsers } from "react-icons/hi2";
import { useUserContext } from "../../context/usersData";
import ActiveUsersPieChart from "../Charts/ActiveUsersPieChart";

const ActiveUsersPieCard = () => {
  const {
    activeUsers,
    totalUsers,
    percentActiveUsers,
    updatePercentActiveUsers,
    calculatePercent,
  } = useUserContext();

  console.log(totalUsers);
  const percent = calculatePercent(totalUsers);
  updatePercentActiveUsers(Number(percent));
  console.log(percent);
  console.log(activeUsers);
  console.log(totalUsers);

  return (
    <div className="md:w-full md:h-[430px] flex flex-col bg-blue-800 shadow-md rounded-lg p-5">
      <section className="md:ml-4">
        <div className="flex gap-2 items-center">
          <HiOutlineUsers size={20} />
          <h3 className="text-xl">Percentage of users active</h3>
        </div>
        <p className="text-2xl font-semibold mt-2 mb-5">{percentActiveUsers}</p>
      </section>

      <ActiveUsersPieChart />
    </div>
  );
};

export default ActiveUsersPieCard;