Поправь данный код:
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import styled from 'styled-components';

const OrderListContainer = styled.div`
  padding: 2rem;
  position: relative;
`;

const OrderItem = styled.li`
  cursor: pointer;
  margin-bottom: 1rem;
  padding: 1.5rem;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(144, 238, 144, 0.8) 0%, rgba(173, 255, 47, 0.6) 100%);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;

  &:hover {
    transform: scale(1.02);
  }
`;

const ModalOverlay = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: ${props => props.show ? 'flex' : 'none'};
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
`;

const OrderDetailsModal = styled.div`
  background: white;
  padding: 3rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  width: 80%;
  max-width: 600px;
  position: relative;
  animation: fadeIn 0.3s ease;

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  &:global(.closing) {
    animation: fadeOut 0.3s ease forwards;
  }

  @keyframes fadeOut {
    to { opacity: 0; transform: translateY(-20px); }
  }
`;

const CloseButton = styled.button`
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  &:hover {
    color: #4CAF50;
  }
`;

const DetailField = styled.p`
  margin: 0.5rem 0;
  font-size: 1rem;
  strong {
    font-weight: 600;
    color: #212121;
  }
`;

const OrderList = () => {
  const [orders, setOrders] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [selectedOrder, setSelectedOrder] = useState(null);
  const [loadingDetails, setLoadingDetails] = useState(false);
  const [errorDetails, setErrorDetails] = useState('');

  useEffect(() => {
    const fetchOrders = async () => {
      const userId = localStorage.getItem('userId');
      if (!userId) {
        setError('User ID is not available.');
        setLoading(false);
        return;
      }

      try {
        const response = await axios.get(`http://localhost:8080/api/orders?userId=${userId}`);
        setOrders(response.data);
      } catch (err) {
        console.error(err);
        setError('Failed to fetch orders.');
      } finally {
        setLoading(false);
      }
    };

    fetchOrders();
  }, []);

  const handleOrderClick = async (orderId) => {
    setLoadingDetails(true);
    setErrorDetails('');

    try {
      const response = await axios.get(`http://localhost:8080/api/orders/${orderId}`);
      setSelectedOrder(response.data);
    } catch (err) {
      console.error(err);
      setErrorDetails('Не удалось загрузить детали заказа');
    } finally {
      setLoadingDetails(false);
    }
  };

  const handleClose = () => {
    const modal = document.querySelector('.OrderDetailsModal');
    if (modal) {
      modal.classList.add('closing');
      setTimeout(() => {
        setSelectedOrder(null);
        modal.classList.remove('closing');
      }, 300);
    }
  };

  return (
    <OrderListContainer>
      <h2>Список заказов</h2>
      <ul>
        {orders.map(order => (
          <OrderItem 
            key={order.orderId} 
            onClick={() => handleOrderClick(order.orderId)}
          >
            <h3>Заказ #{order.orderId}</h3>
            <DetailField><strong>Статус:</strong> {order.orderStatus}</DetailField>
            <DetailField><strong>Дата:</strong> {new Date(order.orderDate).toLocaleString()}</DetailField>
            <DetailField><strong>Сумма:</strong> {order.totalAmount.toLocaleString('ru-RU', { style: 'currency', currency: 'RUB' })}</DetailField>
          </OrderItem>
        ))}
      </ul>

      {/* Модальное окно */}
      {selectedOrder && (
        <ModalOverlay show>
          <OrderDetailsModal>
            <CloseButton onClick={handleClose}>&times;</CloseButton>
            
            <h2>Детали заказа #{selectedOrder.orderId}</h2>
            
            <DetailField><strong>Товар:</strong> {selectedOrder.productName}</DetailField>
            <DetailField><strong>Контакное лицо:</strong> {selectedOrder.contactPerson}</DetailField>
            <DetailField><strong>Номер телефона:</strong> {selectedOrder.phoneNumber}</DetailField>
            <DetailField><strong>Стоимость:</strong> {selectedOrder.price}</DetailField>
            <DetailField><strong>Количество:</strong> {selectedOrder.quantity}</DetailField>

            {/* Секции загрузки и ошибок */}
            {loadingDetails && <DetailField>Загрузка деталей...</DetailField>}
            {errorDetails && <DetailField style={{ color: 'red' }}>{errorDetails}</DetailField>}
          </OrderDetailsModal>
        </ModalOverlay>
      )}

      {/* Индикаторы состояния */}
      {loading && <div>Загрузка...</div>}
      {error && <div style={{ color: 'red' }}>{error}</div>}
    </OrderListContainer>
  );
};

export default OrderList;

Почему-то при нажатии на карточку заказа ничего не отображается, хотя данные приходят:
[
    {
        "orderDetailId": 9,
        "orderId": 2,
        "supplierId": 42,
        "productId": 64,
        "productName": "Ноутбук с высокой производительностью",
        "contactPerson": "Петров Петр",
        "phoneNumber": "+7 911 234-56-78",
        "price": 45000.0,
        "quantity": 1
    },
    {
        "orderDetailId": 10,
        "orderId": 2,
        "supplierId": 42,
        "productId": 66,
        "productName": "Хорошее качество звука для музыки",
        "contactPerson": "Петров Петр",
        "phoneNumber": "+7 911 234-56-78",
        "price": 25000.0,
        "quantity": 3
    }
]

Так же окно с доп.информацией не закрывается