I'm trying to render multiple Cards and storing them in the slides variable so I can put those Cards in a Swiper. but the Select component for each card seems to be unresponsive (unable to click and dropdown to show the MenuItem components). Here's the code:

import React, { useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Card, Select, MenuItem } from '@material-ui/core';


export default function DataSwiper() {
    const [value, setValue] = useState('A');
    const handleChange = (value) => {
        console.log(`value: ${value}`);
        setdataShown(value);
      };


    const slides = ['A', 'B', 'C'].map((e) => {
        return (
            <Card>
                {e}
            <Select label="Label" onChange={handleChange}>    
                <MenuItem key={1} value="A">
                    A
                </MenuItem>
                <MenuItem key={2} value="B" disabled>
                    B
                </MenuItem>
            </Select>
        </Card>
    );
})

    return (
        <Swiper
             spaceBetween={50}
             slidesPerView={1}
             loop
        >     
            {slides.map((slide, index) => (
                <SwiperSlide key={index}>{slide}</SwiperSlide>
            ))}
        </Swiper>
    );
}