I have this problem where I need to fetch data from API and calculate the percentage increase within a certain number of days. Here's the code below...

function Card() {

  const [newEnrollments, setNewEnrollments] = useState("");
  
  const getNewEnrollments = async () => {
   // API call
  };

  useEffect(() => {
    getNewEnrollments();   
  }, []);

  // data returned from API
  // { "new_enrollments": 12248 }  

  return (
    <Wrapper>
      <div className="card1">
        <div className="user">
          <HowToRegRoundedIcon className="icon" />
        </div>
        <div className="card-info">
          <h3>NEW ENROLLMENTS</h3>
          <h4>450</h4>
          <p>
            <BorderLinearProgress variant="determinate" value={90} />
            <span> 90% Increase in 90 Days</span>
          </p>
        </div>
      </div>
      </div>
    </Wrapper>
  );
}

I want to be able to change the hard-coded values in h4(as the value from API), the progress bar, and the span value within 90 days. such that as more data is being updated the values dynamically changes and also the percentage increase.