Can't resolve 'react-horizontal-scrolling-menu/build/scrollMenu' – Magento

I have a react js code in a magento pwa app.

It has a component called categoryList and I need to add a horizontal scroll menu for that category list.

Following is my code

const mapCategory = categoryItem => {
    const { items } = categoryItem.productImagePreview;
    return {
        ...categoryItem,
        productImagePreview: {
            items: items.map(item => {
                const { small_image } = item;
                return {
                    ...item,
                    small_image:
                        typeof small_image === 'object'
                            ? small_image.url
                            : small_image
                };
            })
        }
    };
};

const list = [
    { name: 'item1' },
    { name: 'item2' },
    { name: 'item3' },
    { name: 'item4' },
    { name: 'item5' },
    { name: 'item6' },
    { name: 'item7' },
    { name: 'item8' },
    { name: 'item9' }
];
const MenuItem = ({ text, selected }) => {
    return (
        <div
            className="menu-item"
        >
            {text}
        </div>
    );
};
export const Menu = (list) => list.map(el => {
    const { name } = el;

    return (
        <MenuItem
            text={name}
            key={name}
        />
    );
});
const Arrow = ({ text, className }) => {
    return (
        <div
            className={className}
        >{text}</div>
    );
};
const ArrowLeft = Arrow({ text: '<', className: 'arrow-prev' });
const ArrowRight = Arrow({ text: '>', className: 'arrow-next' });

const CategoryList = props => {
    const { id, title } = props;
    const talonProps = useCategoryList({
        query: categoryListQuery,
        id
    });
    const { childCategories, error, loading } = talonProps;

    const classes = mergeClasses(defaultClasses, props.classes);
    console.log('ssss' +childCategories);
    const header = title ? (
        <div className={classes.header}>
            <h2 className={classes.title}>
                <span>{title}</span>
            </h2>
        </div>
    ) : null;

    let child;
    if (error) {
        child = (
            <div className={classes.fetchError}>
                Data Fetch Error: <pre>{error.message}</pre>
            </div>
        );
    }
    if (loading || !childCategories) {
        child = fullPageLoadingIndicator;
    } else if (childCategories.length === 0) {
        child = (
            <div className={classes.noResults}>No child categories found.</div>
        );
    } else {

        const { selected } = this.state;
        // Create menu from items
        const menu = Menu(list, selected);
        child = (
            <div className={classes.content}>
                {childCategories.map((item, index ) => (
                    <CategoryTile item={mapCategory(item)} key={index} />
                ))}
                <ScrollMenu data={menu}
                arrowLeft={ArrowLeft}
                arrowRight={ArrowRight}
                onSelect=''
                />
            </div>
        );
    }
    return (
        <div className={classes.root}>
            {header}
            {child}
        </div>
    );
};

CategoryList.propTypes = {
    id: number,
    title: string,
    classes: shape({
        root: string,
        header: string,
        content: string
    })
};

export default CategoryList;

I get the following error when I try to use this code. The error seems to be about not being to resolve a specific package or module.

ERROR in ./src/components/CategoryList/categoryList.js
Module not found: Error: Can't resolve 'react-horizontal-scrolling-menu/build/scrollMenu' in '/var/www/html/apekade/apekade-pwa/packages/pwa-neosolax/src/components/CategoryList'
ℹ ｢wdm｣: Failed to compile.

I dont know if I have placed the code correct.I’m a beginner.Please help