В этом компоненте мне нужно выводить в два виджета разные данные:
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import styled from 'styled-components';

const SupplierListContainer = styled.div`
  padding: 2rem;
  display: flex;
  flex-direction: column; /* Вертикальное расположение */
  align-items: flex-start; /* Выравнивание по левому краю */
`;

const Widget = styled.div`
  width: 50%; /* Ширина виджетов установлена на 50% */
  margin: 1.5rem 0; /* Добавлен отступ для размещения */
  padding: 1.5rem;
  border-radius: 10px;
  color: #333; /* Тёмный цвет текста для хорошей читаемости */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;

  &.current {
    background: linear-gradient(135deg, rgba(144, 238, 144, 0.8) 0%, rgba(173, 255, 47, 0.6) 100%); /* Лаймовый к светло-зеленому */
  }

  &.noData {
    background: linear-gradient(135deg, rgba(255, 99, 71, 0.8) 0%, rgba(255, 159, 128, 0.6) 100%); /* Мягкий красный к светло-оранжевому */
  }

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
  }
`;

const SupplierItem = styled.li`
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fafafa;
  transition: transform 0.2s;

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

const SupplierList = () => {
  const [suppliersRelation, setSuppliersRelation] = useState([]);
  const [suppliersNoRelation, setSuppliersNoRelation] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [openWidget, setOpenWidget] = useState(null);

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

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

    fetchSuppliers();
  }, []);

  if (loading) {
    return <div>Загрузка...</div>;
  }

  if (error) {
    return <div>{error}</div>;
  }

   
  const noDataSuppliers = suppliers.filter(supplier => supplier.currentData);

  return (
    <SupplierListContainer>
      <h2 style={{ marginBottom: '1rem' }}>Список поставщиков</h2>
      <Widget className="current" onClick={() => setOpenWidget(openWidget === 'current' ? null : 'current')}>
        <h3>Поставщики, приходящие в данный момент: {currentSuppliers.length}</h3>
        {openWidget === 'current' && (
          <ul>
            {currentSuppliers.map(supplier => (
              <SupplierItem key={supplier.supplierId}>
                <h3>{supplier.companyName}</h3>
                <p><strong>Контактное лицо:</strong> {supplier.contactPerson}</p>
                <p><strong>Телефон:</strong> {supplier.phoneNumber}</p>
                <p><strong>Email:</strong> {supplier.email}</p>
                <p><strong>Адрес:</strong> {supplier.address}</p>
                <p><strong>Должность:</strong> {supplier.postName} ({supplier.postShortName})</p>
              </SupplierItem>
            ))}
          </ul>
        )}
      </Widget>

      <Widget className="noData" onClick={() => setOpenWidget(openWidget === 'noData' ? null : 'noData')}>
        <h3>Поставщики с отсутствующими данными: {noDataSuppliers.length}</h3>
        {openWidget === 'noData' && (
          <ul>
            {noDataSuppliers.map(supplier => (
              <SupplierItem key={supplier.supplierId}>
                <h3>{supplier.companyName}</h3>
                <p><strong>Контактное лицо:</strong> {supplier.contactPerson}</p>
                <p><strong>Телефон:</strong> {supplier.phoneNumber}</p>
                <p><strong>Email:</strong> {supplier.email}</p>
                <p><strong>Адрес:</strong> {supplier.address}</p>
                <p><strong>Должность:</strong> {supplier.postName} ({supplier.postShortName})</p>
              </SupplierItem>
            ))}
          </ul>
        )}
      </Widget>
    </SupplierListContainer>
  );
};

export default SupplierList;

В первый виджет те данные, где из приходящего json userId = userId из локального хранилища, а во второй виджет выводить то, где userId <> userId из локального хранилища