Manually setup the value of the progress bar in React

Question

I am using the @ramonak/react-progress-bar for the first time and I want to setup the progress bar value manually at certain steps. This is my code below -

export const Search = (props) => {
const [loading, setLoading] = useState(false);
const [progress, setProgress] = useState(10);

    const onSearch = async () => {

        setLoading(true);

        setProgress(30);
        try {
            const searchResults = await AppApi.searchMultiple(emails);

            let userList = [];
            for (let i = 0; i < searchResults.length; i++) {
                //processing a loop here 
            }
            setProgress(80);
            userList.sort(sortByEmail);
            setProgress(95);
            console.log("Reaches here ?");
            onSearchComplete(userList);
        } catch (err) {
            console.log({ err });
            setMsgBox({ message: `${err.message}`, type: 'error' });
        }

        setLoading(false);
    }

    if(loading) return   <ProgressBar completed = {progress}  bgColor="#008eff"labelAlignment="outside" labelColor="white" animateOnRender maxCompleted={100}/>
  return (
        <Box>

            <Box>{msgBox && (<a style={{ cursor: 'pointer' }} onClick={() => setMsgBox(null)} title="Click  to dismiss"><MessageBox type={msgBox.type || 'info'}>{msgBox.message}</MessageBox></a>)}</Box>
            {onSearch()}

        </Box>
    );
}

The setProgress hook works fine and reaches the 30% when I use it before the try catch block but doesnt update as the code executes. What am I doing wrong here ? Edit - I tried debugging, there are no errors and it reaches the line onSearchComplete where I am rendering the results to a different component.