Ant Design Vue: Carousel arrows disappear when there's only one div content

I'm using Ant Design Vue's Carousel to display some backend generated data in a Instagram Story Clone project.

The problem is that when there's only one content in the carousel, the arrows and dots disappear.

Carousel Docs: https://antdv.com/components/carousel

Code Sandbox: https://codesandbox.io/s/brave-blackwell-e6d5c?file=/src/App.vue

Arrows Showing:

<a-carousel arrows>

    <!-- Left Arrow -->
    <div
      slot="prevArrow"
      slot-scope="props"
      class="custom-slick-arrow"
      style="left: 10px;zIndex: 1"
    >
      <a-icon type="left-circle" />
    </div>

    <!-- Right Arrow -->
    <div
      slot="nextArrow" 
      slot-scope="props"
      class="custom-slick-arrow" 
      style="right: 10px"
    >
      <a-icon type="right-circle" />
    </div>

    <div><h3> Content 1 </h3></div>
    <div><h3> Content 2 </h3></div>
  </a-carousel>

Arrows not showing:

<a-carousel arrows>

    <!-- Left Arrow -->
    <div
      slot="prevArrow"
      slot-scope="props"
      class="custom-slick-arrow"
      style="left: 10px;zIndex: 1"
    >
      <a-icon type="left-circle" />
    </div>

    <!-- Right Arrow -->
    <div
      slot="nextArrow" 
      slot-scope="props"
      class="custom-slick-arrow" 
      style="right: 10px"
    >
      <a-icon type="right-circle" />
    </div>

    <div><h3> Just content 1 </h3></div>
 </a-carousel>

How can I make sure that the arrows keep displaying also when there's only one content?

from Ant Design Vue: Carousel arrows disappear when there's only one div content