I am tagging geospatial data using S2 and would like to display it on a leaflet map, along with the corresponding S2 tile. When I use the library s2-cell-draw to plot the s2 boxes, there is one row with a triangle and unclosed polygons. Image attached. Also, the polygons don't always touch each other like I would expect.

Does anyone have a solution to this? The tiles should touch eachother and actually represent the corresponding S2 tile. Or is there another s2 drawing library in js that I should be using? Images and code below.

import {createPolygonListFromBounds, deboxByKey} from 's2-cell-draw';

const bounds = [
            [11.987743,-7.815649],
            [43.158713,10.386320],
            [74.118173,58.119280],
            [-2.337240,40.379856],
        ]
        const polygonList = createPolygonListFromBounds({
            bounds: [
                [bounds[0][1], bounds[0][0]],
                [bounds[2][1], bounds[2][0]]
            ],
            level: 7
        });
          
        let boxes = [];
        for (let i = 0; i < polygonList.length; i++) {
            boxes.push(deboxByKey(polygonList[i]["S2Key"]))
        }

// ... in Leaflet map:

{boxes.map((box, i) => (
        <Polygon pathOptions={{ color: 'purple' }} positions={[
            [box.path[0][1], box.path[0][0]],
            [box.path[1][1], box.path[1][0]],
            [box.path[2][1], box.path[2][0]],
            [box.path[3][1], box.path[3][0]],
            [box.path[0][1], box.path[0][0]],
        ]} />
    ))}