Importing an async function in a ReactJS component

Question

so I'm trying to import an async function (that is in a separate file) in a ReactJS component and ending up with the following error:

TypeError: The "original" argument must be of type Function
promisify
node_modules/util/util.js:601
  598 | var kCustomPromisifiedSymbol = typeof Symbol !== 'undefined' ? Symbol('util.promisify.custom') : undefined;
  599 | 
  600 | exports.promisify = function promisify(original) {
> 601 |   if (typeof original !== 'function')
  602 |     throw new TypeError('The "original" argument must be of type Function');
  603 | 
  604 |   if (kCustomPromisifiedSymbol && original[kCustomPromisifiedSymbol]) {

The async function that I'm trying to import looks as follows: (filename: pa11y_script.js)

const pa11y = require("pa11y");
async function runPa11y(){
        try{
            const results = await pa11y('https://solferinoacademy.com/');
            return true;
        } catch (error) {
            return false;
        }
    }
    
export default runPa11y;

The component in which I'm trying to import the above function looks as follows: (filename: Accessibility.js)

import React, { useState } from "react";
import style from "./Accessibility.module.css";
import Button from "react-bootstrap/button";
import runPa11y from "./pa11y_script";

const Accessibility = () => {

    const [url, updateURL] = useState("");
    const [assessmentResults, updateResultSection] = useState("");

    // Function for triggering the accessibility assessment.
    const perform_assessment = () => {
        runPa11y();
    }

    return (<>
        <div className={style["main-div"]}>
            <div className={style["navbar-div"]}>
                <div><h4>Accessibility Assessment</h4></div>
                <div className={style["control-panel"]}>
                    <div className={style["url-input"]}><input placeholder="Enter the URL ..." value={url} onChange={event => updateURL(event.target.value)} /></div>
                    <div className={style["button-section"]}>
                        <div><Button variant="dark" onClick={() => perform_assessment()}>Perform Accessibility Test</Button></div>
                        <div><Button variant="dark">View Previous Report</Button></div>
                    </div>
                </div>
            </div>
            <div className={style["results-section"]}>

            </div>
        </div>
    </>)
}

export default Accessibility;

I noticed that whenever I remove import runPa11y from "./pa11y_script"; and runPa11y(); from the component file (Accessibility.js), then I don't get this error anymore which confirms that importing this function is the cause of the error. I tried a number of different ways to solve this problem but couldn't find a way around it. I even tried different ways suggested in this stackoverlfow post but still facing the same issue. It would be really great if someone could guide me as to how I should be going about solving this issue. Thanks!