Setting or getting a value from a method to an object

Question

I'm working on a basic Todo-app and currently implementing a progress bar to showcase how many of the added tasks have been completed.

The way I've done it is that I'm using the following method, which is called every time there is a change in my Task object. This is done with React useEffect and is working like a charm when it comes to the output of that console.log.

import {useEffect} from "react";

const Daily = ({ tasks, numberOfTasks, tasksCompleted }) => {
    // Updating progress with useEffect every time something happens with tasks
    useEffect(() => {
        updateProgressHandler();
    }, [tasks]);

    // Check and update progress based on completed tasks
    const updateProgressHandler = () => {
        numberOfTasks = tasks.length;
        tasksCompleted = tasks.filter(task => task.completed === true).length;
        console.log(`Updating progress for ${numberOfTasks} tasks, where ${tasksCompleted} are completed.`);
    }

    // Saving the completed % to a variable
    const completed = numberOfTasks / tasksCompleted * 10;
    //console.log(numberOfTasks);

    return (
        <div className="row">
                <div className="col">
                    <div className="progress progress-daily" style={{ height: "38px" }}>
                        <div
                            className="progress-bar progress-bar-striped progress-bar-animated bg-success"
                            role="progressbar"
                            aria-valuenow={tasksCompleted}
                            aria-valuemin="0"
                            aria-valuemax={numberOfTasks}
                            style={{width: `${completed}%`}}
                        >
                            {completed}%
                        </div>
                    </div>
                </div>
                <div className="col-1">
                    <button className="btn btn-success">Done</button>
                </div>
        </div>
    )
}

export default Daily;

My issue here however, is the fact that I can't figure out how to pass the numberOfTasks and tasksCompleted to my Daily progress object.

State is set within the App.js as follows:

function App() {
    // State
    const [numberOfTasks, tasksCompleted] = useState(0);
    const [inputText, setInputText] = useState("");
    const [tasks, setTasks] = useState([]);
    
    return ( ... );
}

So, while it works perfectly fine in the console.log, the value I'm getting in the progress bar itself is NaN. How come?