simplebar-react

 import styled from 'styled-components'
 import SimpleBar from 'simplebar-react'
 
 let flg = false
 
 const Component = (props, ref) => {
   return (
     <_Wrap ref={ref} id="artwork">
       <SimpleBar className="horizontal-simplebar">
         <_List>
           {arr.map((item, index) => {
             return <ArtworkItem key={index} />
           })}
         </_List>
       </SimpleBar>
     </_Wrap>
   )
 }

 .horizontal-simplebar {
   overflow-y: hidden;
 
   .simplebar-horizontal {
     background: #eeeeee;
     height: 1px;
   }
 
   .simplebar-scrollbar {
     height: 1px !important;
     top: 0 !important;
 
     &:before {
       background: #000;
       opacity: 1 !important;
     }
   }
 }

 import React, { useState, useEffect } from 'react'
 import { createGlobalStyle } from 'styled-components'
 import reset from 'styled-reset'
 import { baseFontFamily } from '@/scripts/snippets'
 import { useWindowDimensions } from '@/hooks/dimentions'
 import 'simplebar/src/simplebar.css'
 import '@/styles/simplebar.scss'
 
 export const DataContext = React.createContext()
 
 const App = ({ Component, pageProps }) => {
   const [isClient, setIsClient] = useState(false)
 
   return isClient ? (
     <>
       <_GlobalStyle />
       <DataContext.Provider value={data}>
         <Component {...pageProps} />
       </DataContext.Provider>
     </>
   ) : (
     <></>
   )
 }
 
 const _GlobalStyle = createGlobalStyle`
   ${reset}
 
   * {
     ${baseFontFamily}
     box-sizing: border-box;
   };
 
   button {
     background-color: transparent;
     border: none;
     cursor: pointer;
     outline: none;
     padding: 0;
     appearance: none;
   };
 
   img {
     backface-visibility: hidden;
     vertical-align: bottom;
   }
 `
 
 export default App