flip_card controller flips wrong card when wrapped under carousel_slider

Question

I have some cards (which can be flipped, I'm using flip_card for this). Now I want to show these cards using carousel_slider.

But if I use a FlipCardController to flip the cards (when wrapped under carousel_slider), it flips the wrong card (in my case, the next card). This controller is controlled by a button press of the current card.

I am using this code:

child: CarouselSlider(
  items: [0, 1, 2].map((i) {
    return Builder(
      builder: (BuildContext context) {
        return FlipCard(
          controller: controller,  //FlipCardController
          fill: Fill.fillBack,
          flipOnTouch: false,
          direction: FlipDirection.HORIZONTAL,
          front: ExperienceCardFront(  //this is my custom widget
            image: data[i][4],
            title: data[i][0]),
          back: ExperienceCardBack(),  //another custom widget
       );
     });
   }).toList(),
   options: CarouselOptions(),
),

This is the front widget of the card that has the button containing the controller:

//import statements

class ExperienceCardFront extends StatefulWidget {
  //contents
}

class _ExperienceCardFrontState extends State<ExperienceCardFront> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          //other widgets
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: MaterialButton(
              child: text('Read More', 15, Colors.blueGrey),
              onPressed: () {
                controller.toggleCard();  //here is the controller
              },
            ),
          ),
        ],
      ),
    );
  }
}

I'm attaching a screen recording of the same:

Also I've found out that if the controller is removed and flipOnTouch is set to true, the desired card can be flipped on touch. I'm experiencing this problem only with a controller.