Горизонатльный scroll на нажатия кнопки React

Мне нужно сделать так, чтобы salesRibbon__productCarousel прокручивался когда я нажимаю на salesRibbon__arrows_arrowForward вперед и salesRibbon__arrows_arrowBack назад

    import React, { useRef } from 'react';

const SalesRibbon = () => {
    const container = useRef(null); //<--- не работает useRef() для salesRibbon__productCarousel, он просто его не видет и не помещает в переменную

    const scroll = (scrollOffset) => {
            container.current.scrollLeft += scrollOffset;
      };

    return(

                  <div className='salesRibbon__arrows'>
                        <div className='salesRibbon__arrows_arrowBack' onClick={scroll(-20)}>
                            <div className='salesRibbon__arrowBack-gradient'></div>
                            <img className='salesRibbon__arrowBack-arrow' src={images.salesRibbon__arrowBack} alt=''/>
                        </div>
                        <div className='salesRibbon__arrows_arrowForward' onClick={scroll(20)}>
                            <div className='salesRibbon__arrowForward-gradient'></div>
                            <img className='salesRibbon__arrowForward-arrow' src={images.salesRibbon__arrowForward} alt=''/>
                        </div>
                    </div>
            {/* <div className='salesRibbon__productCarousel_forHidden' id='salesRibbon__productCarousel_forHidden'> */}
                <ScrollContainer className='salesRibbon__productCarousel' ref={container} vertical={false}>
                    {sales.map((data) => {
                        return(
                            <ErrorBoundary>
                                <ProductPlate key={data.id} sales={data}/>
                                <ProductPlate key={data.id} sales={data}/>
                                <ProductPlate key={data.id} sales={data}/>
                                <ProductPlate key={data.id} sales={data}/>
                                <ProductPlate key={data.id} sales={data}/>
                            </ErrorBoundary>
                        )
                        })
                    }
                </ScrollContainer>

    )
}

<div className='salesRibbon__arrows_arrowForward' onClick={() => document.getElementById('container').scrollLeft += 20}> <--- вот так тоже не работает