Can't align indicators

[SoPH89]

Hi, I'm trying to align indicators that will be next to each other but the result is that they are sitting one over the other in some big gap. When I hover on them they have an elliptic background that is probably causing them to be in this form. When I set indicators={false} the entire component is gone.

How can I adjust them to be align next to each other?

import {
  CarouselContainer,
  CarouselStyled,
  Description,
  Img,
  StyledPaper,
  StepTitle,
  SolutionTitle,
} from './carousel.styled';

import waveBackground from '../../../../assets/images/wave-background.png';

const Item = ({
  item,
  index,
  title,
  isStepsShown,
}: {
  item: any;
  index: number;
  title: string;
  isStepsShown: boolean;
}) => {
  return (
    <>
      <SolutionTitle>{title}</SolutionTitle>
      <StyledPaper>
        <Img src={item.image.url} alt={item.description} />
        {isStepsShown && <StepTitle>Step {index + 1}</StepTitle>}
        <Description>{item.solutinDescription}</Description>
      </StyledPaper>
    </>
  );
};

const CarouselComponent = () => {
  const data = useLocation().state;
  const carouselData = data.data.solutions.map((i) => i);

  const isStepsShown = carouselData.length > 1;

  return (
    <div className="container">
      <img src={waveBackground} className="image" />
      <CarouselContainer>
        <CarouselStyled
          cycleNavigation={true}
          navButtonsAlwaysInvisible={true}
          autoPlay={false}

          next={(next, active) =>
            console.log(`we left ${active}, and are now at ${next}`)
          }
          prev={(prev, active) =>
            console.log(`we left ${active}, and are now at ${prev}`)
          }
        >
          {carouselData.map((item: any, i: number) => (
            <>
              <Item
                key={i}
                title={data.data.subtitle}
                index={i}
                isStepsShown={isStepsShown}
                item={item}
              />
            </>
          ))}
        </CarouselStyled>
      </CarouselContainer>
    </div>
  );
};

export default CarouselComponent;