How to have pagination component render ais-Pagination-item as span element or anything that's not unordered list or list html element?

Open Q&A
1

Hi. I am trying to have pagination result display in one line, instead of rendering pagination element as list li element.
I’ve tried custom Pagination widget as below:

{enteredSearchTerm && (
  <div className={styles.search_display}>
    <Hits hitComponent={Hit} />
    <CustomPagination
    showFirst={true}
    showPrevious={true}
    showNext={true}
    showLast={true}
    />
  </div>
)}

CSS:

  .ais-Pagination-list {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  .ais-Pagination-item {
    padding: 0.5rem;
    margin: 0 0.5rem;
    cursor: pointer;
  }
  
  .ais-Pagination-item--disabled {
    cursor: not-allowed;
  }

Custom Pagination component:

type or paste code here