How to display the average calculation in the screen using react

import React, { useState, useEffect, useMemo } from "react";

function Average ({posts, setUser, user}){
  
  const [procedures, setProcedures] = useState ([])
  const [filteredProcedure, setFilteredProcedure] = useState ("")
  const [averageCost, setAverageCost] = useState (0)
  const uniques = procedures.map(procedure => procedure.procedure)
  .filter((value, index, self) => self.indexOf(value) === index )

  useEffect(() => {
    fetch(`/posts/${procedures}`)
      .then((r) => r.json())
      .then(setProcedures);
  }, [posts]);

    function handleProcedureChange(procedure) {
      setFilteredProcedure(procedure);
      let filteredObject = procedures.filter (p=> p.procedure === procedure)
      console.log("lenght of filtered procedure:", filteredObject)
      
      let total = 0;
      for (let ii = 0; ii < filteredObject.length; ii++) {
        total = total + filteredObject[ii].patient_cost
      }
      console.log("total:", total)
      let avg = total / filteredObject.length
      console.log("average:", avg)
     }
    function handleChange(e) {
      handleProcedureChange(e.target.value);
      console.log(e.target.value)
    }
    return (

    <div >
      <div >
      <label htmlFor="procedure">Procedure:</label>
      <select
        id="procedure"
        name="procedure"
        value={filteredProcedure}
        onChange={handleChange}      >
        <option>Select Procedure</option>
        {uniques.map((procedure) => (
          <option key={procedure} value={procedure}>
            {procedure} 

          </option>
        ))}
      </select>
          </div>
        
          average: {averageCost}
    </div>
  )
}

export default Average;