I'm getting this response but can't identify the problem - "Uncaught (in promise) TypeError: navigator.getGamepads is not a function"

I'm new to JavaScript and so don't really know where to go.. Here is the code which falls over right at the start.

async function updateControls() {
    const gamepad = navigator.getGamepads()[0];

    if (gamepad != undefined) {

        gpConf.buttons.padUp = gamepad.buttons[12].value
        gpConf.buttons.padDown = gamepad.buttons[13].value
        gpConf.buttons.padLeft = gamepad.buttons[14].value
        gpConf.buttons.padRight = gamepad.buttons[15].value

        //setting axes
        gamepad.axes.forEach((value, index) => {
            gpControls.axes[index] = exponentiate(value)
        });

        //setting paddles
        gpControls.paddles.left = Number(gamepad.buttons[6].value.toFixed(3))
        gpControls.paddles.right = Number(gamepad.buttons[7].value.toFixed(3))
        gpControls.buttons.L1 = gamepad.buttons[4].value
        gpControls.buttons.R1 = gamepad.buttons[5].value
        gpControls.buttons.square = gamepad.buttons[2].value
        gpControls.buttons.triangle = gamepad.buttons[3].value

        setTimeout(() => {
            updateControls();
        }, 100);


        dispatch('car-control', gpControls)
        dispatch('car-conf', gpConf)
    }
}

I've googled for help but haven't found a resolution. the error that comes up is:
"Uncaught (in promise) TypeError: navigator.getGamepads is not a function"

I don't know if it is relevant but I'm using Windows 10 and Firefox.

According to the MDN docs on this function, Firefox requires a secure context to use it. That means you'll need to either be running the webpage from your own computer, or over HTTPS. You can also use other browsers such as Chrome or Edge for now, although they may require a secure context as well in the future.