Basically every time I do a operation to my database (sqlite3) it does not render immediately on the page, but I have to click on some other component to update or I have to refresh the page/reset the server

This is the snippet I quite use in every page component:

const fetchData= async()=>{
        let updatedVector= await API.getUpdate();
        for (let i = 0;i<props.courses.length;i++){
            for (let j=0;j<updatedVector.length;j++){
                if(props.courses[i].code===updatedVector[j].code){
                    props.courses[i].current= await API.getSpecificData(props.courses[i].code);
                }
            }
        }
    }

    //
    useEffect(()=>{
        fetchData();
    },[fetchData])

It does update on the database but takes some time to update on the component, is there any way to update like in an immediate way? Or I have to refresh the application.

EDIT: I passed the setState too, but yet I have to click at least twice on the component link and then I have my update:

//get updates
    useEffect(()=>{
        console.log("triggered")
        const fetchData= async()=>{
            let updatedVector= await API.getUpdate();
            for (let i = 0;i<props.courses.length;i++){
                for (let j=0;j<updatedVector.length;j++){
                    if(props.courses[i].code===updatedVector[j].code){
                        props.courses[i].current= await API.getSpecificData(props.courses[i].code);
                    }
                }
            }
            props.setCourses(props.courses)
        }
        fetchData();
    },[fetchData])