React Web Worker thread halting webpage

Question

Im using the shopify react webworker package and my testing doesn't seem to be working. I have a worker thread that runs a loop for 3 seconds. My assumption is I should still beable to interact with the website while this worker runs but I am unable to. Any ideas or insight into how web workers work?

import React, { useEffect, useMemo, useState } from 'react';
import { createWorkerFactory, useWorker } from "@shopify/react-web-worker";

const createWorker = createWorkerFactory(() => import('./workers/Worker'))

function Process() {
    const [element, setElement] = useState("running")
    const worker = useWorker(createWorker);

    useEffect(() => {
        (async () => {
            const webWorkerMessage = await worker.workerFunction();
            setElement(webWorkerMessage);
        })();
    }, [worker]);

    return (
        <div>
            {element}
        </div>
    )
}


function App() {
    const [value, setValue] = useState(0)

    const buttonClick = () => {
        setValue(value + 1)
    }

    return (
        <div className="App">
            {(value === 0) ? <></> : <Process />}
            <button style={{ margin: 100 }} onClick={() => buttonClick()}>CLICK ME</button>
            {new Array(value).fill(
                <div>
                    Cool
                </div>
            )}
        </div>
    );
}

export default App;

export const workerFunction = (): string => {
    let retern = false
    let time = new Date().getTime()

    while(!retern){
        if(new Date().getTime() - time  > 1000){
            retern = true
        }
    }
    
    return "done"
}