как показывать полосу прокрутки над фиолетовой карточкой и показывать только когда пользователь прокручивает в React. js

Question

Как показать прокрутку только тогда, когда пользователь прокручивает и показывает прокрутку по фиолетовой карточке с указанным c дизайном, как на изображении ниже

Дизайн, который я хочу

Это то, что я сделал

Я хочу избавиться от этой белой части в правой руке и хочу прокрутить карты

вот код этот див

 mainDiv:{
    width:'400px',
    minWidth:'400px',
    height: 'calc(100vh - 90px)',
    maxHeight: 'calc(100vh - 90px)',
    overflowY:'auto',
    display:'flex',
    flexDirection:'column',
    margin:'10px 0px 0px 0px',
    borderRadius:'10px',
    backgroundColor:'#fff',
    boxShadow:'0px 2px 4px -1px rgba(0,0,0,0.2)',
    "&::-webkit-scrollbar": {
        width: '11px'
    },
    scrollbarWidth: 'thin',
    scrollbarColor: '#000',
    "&::-webkit-scrollbar-track": {
        backgroundColor: 'transparent'
    },
    "&::-webkit-scrollbar-thumb": {
        backgroundColor:  '#000',
        borderRadius: '6px',
        border: '3px solid #000',
    }

},