centering images inside the carousel

[kevinmachstudio]

is there a way to center the images in the carousel? I've tried the following although it's still being aligned left

     <Carousel
        style={{
          textAlign: "center",
        }}
        cellAlign={Alignment.Center}
        defaultControlsConfig={{
          nextButtonText: (<MdNavigateNext className="z-10" />) as any,
          prevButtonText: (<MdNavigateBefore className="z-10" />) as any,

        }}
      >
        {photos.map((photo, idx) => {
          return (
            <Image
              src={photo.url}
              key={idx}
              width={250}
              height={250}
              className="object-cover rounded"
            />

          );
        })}
      </Carousel>

^ if you take out the text-align: left it will center as shown below

[vaishal]

You can wrap the image in a wrapper that centers it.

Example: https://codesandbox.io/s/romantic-dijkstra-m5igvb?file=/src/App.js