Create algorithm for creating polygons inside of given bounds

Question

I am using react-leaflet and leaflet geoman.

For this project I am creating placements (camping spots) on a festival map. Then I got the new map.png and some of the camping spots is rotated.

I have a algorithm that is given bounds and it's creating smaller polygons inside the given bounds. This is working, BUT if the bounds is at an angle it does not work. It still creates the polygons as the parent bounds was not "rotated".

I have tried changing the algorithm myself and many many rounds with chatGPT + many hours of research.

Before the function fires the user selects a big square on the map for an entire field of placements, then they can rotate it before the function fires when they click "save".

This is the function:

const createPolygons = (
    parentBounds: number[][],
    Xamt: number,
    Yamt: number
  ) => {
    const parentWidth = parentBounds[1][0] - parentBounds[0][0];
    const parentHeight = parentBounds[2][1] - parentBounds[0][1];

    const childWidth = parentWidth / Yamt;
    const childHeight = parentHeight / Xamt;
    const newField: BookableResource[] = [];
    let counter = startNumberRef ? startNumberRef.current - 1 : 0;

    for (let y = 0; y < Xamt; y++) {
      for (let x = 0; x < Yamt; x++) {
        counter += 1;

        const startX = parentBounds[0][0] + x * childWidth;
        const startY = parentBounds[0][1] + y * childHeight;
        const endX = startX + childWidth;
        const endY = startY + childHeight;

        const childBounds: number[][] = [
          [startX, startY],
          [startX, endY],
          [endX, endY],
          [endX, startY],
        ];

        newField.push({
          resourceId: counter,
          resourceNumber: counter,
          resourceCode: `${fieldLetterRef.current.toUpperCase()}${counter}`,
          bookingStatus: "PublicBookable",
          resourceName: `${
            resourceGroupRef.current.groupName
          } Plass ${fieldLetterRef.current.toUpperCase()}${counter}`,
          resourceGroupId: resourceGroupRef.current.resourceGroupID,
          partGroupId: itemGroupRef.current.partGroupId,
          placement: {
            bounds: childBounds,
            resourceId: counter,
            available: true,
          },
        });
      }
    }
    /* startNumberRef.current += newField.length; */
    /* setPolygons([...polygons, ...newField]); */
    setCreatePolygon(false);
    return newField;
  };