Cannot apply multiple styles to WebGLPointsLayer

[Sidders22]

I cannot apply multiple styles to a WebGLPointsLayer, such as a circle shape and icon image, which should appear together for each Point feature.

To Reproduce
For example, if I use the following code:

            const circleStyle = {
                'circle-stroke-width': 2,
                'circle-stroke-color': '#ffffff',
                'circle-radius': 18,
                'circle-fill-color': "#2E3916",
                'circle-rotate-with-view': false,
                'circle-displacement': [0, 0],
                'circle-opacity': 1,
            }

            const iconStyle = {
                'icon-src': icon_URL,
                'icon-width': 24,
                'icon-height': 24,
                'icon-color': '#262626',
                'icon-size': [24, 24],
                'icon-scale': 1
            }

            layer = new WebGLPointsLayer({
                source: new VectorSource({
                    features: features,
                }),
                style: [circleStyle, iconStyle]
            });

I get this error:

But if I replace style: [circleStyle, iconStyle] with either circleStyle or iconStyle, the style is applied successfully.

Also, if I combine iconStyle and circleStyle in that order into one object, only the icon styling is applied. But if the order is reversed (icon style properties first, then circle properties), then I get an error like the following for each circle property: ERROR: Expected "}" but found "'circle-stroke-width'"

Expected behavior
The documentation for Flat Styles says "types ... can be composed into a single object", and I assume a combination of styles can be applied to a typical VectorLayor. So isn't the same possible for a WebGLPointsLayer?