6 угольники по диагонали

Вообще делаю тут одну задачу, которую не могу решить, а именно на данный момент не могу расположить гексогены как показано на фото, так же не знаю как размер изменить для отдельных гексов , создал объект с данными, и мапил его, в итоге получилось как на скрине , сделал через объект потому что, в конечном итоге эти гексогены должны менять положение и данные внутри выбранного. Попробовал через грид, и как то не очень выглядит, но буду не против любых решений) Основная страница, ее css, и как мапил

import React, {useRef, useState} from "react";
import {InfoBlocks} from "./InfoBlocks";
import "../styles/main.css";
import {Hexogon} from "./Hexogon";

export const Main = () => {
    return (
        <main>
            <div className="versus-items">
                <div className="werh">
                    <div className="triangle-top">
                        <p>123</p>
                    </div>
                </div>
                <Hexogon/>
                <div className="niz">
                    <div className="triangle-bottom">
                        <p>123</p>
                    </div>
                </div>
            </div>
        </main>
    )
}

main {
    display: flex;
    height: 100%;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
}

.werh:nth-child(1) {
    margin-right: 3%;
    height: 152px;
    z-index: 3;
    align-self: flex-start;
    flex: 1 1 auto;
}

.centre:nth-child(2) {
    align-self: center;
    flex: 0 1 auto;
}

.niz:nth-child(3) {
    margin-left: 3%;
    height: 152px;
    align-self: flex-end;
    flex: 1 1 auto;
}

.versus-items {
    display: flex;
    color: #FFFFFF;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

.triangle-top {
    z-index: 3;
    height: 152px;
    display: flex;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 20px;
    background: #FFF;
}
.triangle-top p {
    transform: skew(-150deg);
}

.triangle-bottom {
    height: 152px;
    display: flex;
    background: #FFF;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 20px;
    align-items: center;
    justify-content: center;
}

.triangle-bottom p {
    transform: skew(-156deg);
}

.roundHex {
    position:relative;
    background: #FFF;
    border-radius:14px;
    height:320px;
    width:192px;
    z-index: 444;
    overflow-wrap: break-word;
}

.roundHex p {
    margin: 0;
    color: black;
}

.roundHex:before, .roundHex:after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    background:inherit;
    border-radius:inherit;
    height:100%;
    width:100%;
    z-index: -1;
}
.roundHex:before {
    -webkit-transform:rotate(60deg);
    -moz-transform:rotate(60deg);
    transform:rotate(60deg);
}
.roundHex:after {
    -webkit-transform:rotate(-60deg);
    -moz-transform:rotate(-60deg);
    transform:rotate(-60deg);
}

.hexparty {
    position: absolute;
}

import React from "react";
import {InfoBlocks} from "./InfoBlocks";
import '../styles/main.css'

export const Hexogon = () => {
    return (
        <div className="hexparty">
            <div className="centre">
                {InfoBlocks.map((block) =>
                    <div className="roundHex">
                        <p>{block.date}</p>
                    </div>
                )}
            </div>
        </div>
    )
}