How to make a horizontal scroll with dots using react

I am working on one small part where I have to show some divs horizontally, so when it goes out of the space I am using css as overflow-x:auto so that it becomes scrollable.

What I did

<div className="App d-flex">
  {data.map((li) => {
    return (
      <div key={li.id} className="boxes">
        {li.name}
      </div>
    );
  })}
</div>

My CSS below

.d-flex {
  display: flex;
}
.boxes {
  padding: 12px;
  margin: 4px;
  background-color: rgb(196, 218, 243);
  min-width: 150px;
  overflow-x: auto;
  text-align: center;
  border-radius: 6px;
}

What I am trying to do

• I want to put dots there so that when user clicks on dots it should scroll.
• the dots should trigger only when exceeded a number of items, means if there are less items which can be shown on one screen then no dots or else dots.
• Here I am not getting the idea how can I do this using react-hooks.

Here is my Code SandBox

from How to make a horizontal scroll with dots using react