Hello everyone !

I have a problem with the scroll bar :
That is my code :
import * as React from "react";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Chapters, ChaptersProps } from "./Chapters";
import { Typo } from "@/ui/design-sytem/typo";
import clsx from "clsx";

export interface ChaptersBarProps {
chapters: ChaptersProps[];
className?: string;
}

export const ChaptersBar = ({ chapters, className = '' }: ChaptersBarProps) => {
return (
<div className="flex justify-center pt-16">
<div className="w-[1062px] h-[317px] rounded-3xl bg-white-white70">
<Typo
fontFamily="sfPro"
fontSize={24}
fontWeight="Medium"
lineHeightPercentage={1.2}
letterSpacing={1}
className="pl-8 pt-4"
>
Toutes les Mustawas
</Typo>
<div className="pl-8 pr-8">
<ScrollArea>
<div className="flex w-max space-x-6 pt-8 pb-6">
{chapters.map((chapter) => (
<Chapters
key={chapter.chapter}
chapter={chapter.chapter}
arabic_chapter={chapter.arabic_chapter}
is_clicked={chapter.is_clicked}
/>
))}
</div>
<ScrollBar
orientation="horizontal"
/>
</ScrollArea>
</div>
</div>
</div>
);
};
And in pictures I put what it return and I want a scroll bar like in shadcn exmaples, a little scrollbar that translates.

Thanks for helping me !