При рендере модального окна карточки через MAP - часть карт рендерится нормально, а у части ломаются стили

Всем доброго дня, прошу помочь в следующем вопросе: есть таблица - ряды мэпим, при клике в одно из полей должно отобразиться модальное окно с данными. Все было норм но с добавлением новых элементов и стилей появился конфликт стилей (отследить что стало причиной не удается) - первая карточка модального окна абсолютно прозрачна и не кликабельна. Каждая последующая (по ряду в низ) становится частично не прозрачной и на не прозрачной части можно кликать кнопки уже). И далее чем ниже, тем более нормальная карточка появляется. Пробовал проверять перекрестные стили, z-index, !important, события кликов pointer-events: auto; (они не установлены у меня), в devtools Computed реальных значений - никаких аномалий не выявлено.

Если есть у кого похожий опыт - задайте направление мысли пожалуйста - куда копать еще.

прикладываю код и скрины для полного понимания:

src/features/Alerts/AlertJsonModalPreview.tsx

return (
    <>
      <ModalViewJson
        open={isModalOpen}
        onClose={handleCloseModalViewJson}
        jsonData={jsonData}
        id={selectedId}
      />

      <div>
        {alertsToRender.map((alert) => (
          <div
            key={alert.id}
            onClick={() => handleOpenModalViewJson(alert)}
            style={{ cursor: "pointer" }}
          >
            {alert.base.queryParam}
          </div>
        ))}
      </div>
    </>
  )

src/shared/ui/ModalWindows/ModalViewJson/ModalViewJson.tsx

return (
  <div
    className={styles.container}
    onClick={(e) => {
      if (e.target === e.currentTarget) {
        onClose()
      }
    }}
    role="dialog"
  >
    <div className={styles.form}>
      <IconButton
        onClick={onClose}
        sx={{
          position: "absolute",
          top: 8,
          right: 8,
          zIndex: 10,
          backgroundColor: "#f0f0f0",
          "&:hover": {
            backgroundColor: "#ddd",
          },
        }}
      >
        <CloseIcon />
      </IconButton>
      {jsonData ? (
        <>
          <JsonView style={{ marginBottom: "10px" }} src={jsonData} />
          <div className={styles.buttonContainer}>
            <Button
              onClick={handleCopy}
              variant="contained"
              color="primary"
              sx={{ mr: 1, height: "32px" }}
            >
              Копировать JSON
            </Button>
            <h1>Параметр:#{id}</h1>
          </div>
        </>
      ) : (
        <span>Нет данных для отображения</span>
      )}
    </div>
  </div>
)

src/shared/ui/ModalWindows/ModalViewJson/styles.module.css

.form {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    max-height: 90vh;
    overflow-y: auto;
    background-color: white;
    border: 1px solid #000;
    box-shadow: 0 4px 4px rgba(46, 44, 44, 0.1);
    padding: 16px;
    border-radius: 8px;
    font-size: 10px;
    z-index: 1000;
  }
  
  .container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
  }
  
  .JsonView {
    margin-bottom: 10px;
  }
  

    .buttonContainer {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  
  
  .h1 {
    margin-left: 10px;
  }