Display polygon & and multipolygon data at once

[emekaokoli]

I have a geojson dataset that includes both polygon and multipolygon data types. I am attempting to overlay them on my own basemap, but I am encountering an issue where the information is not displaying properly when I add both types. However, when I add just one type (either polygon or multipolygon), only some of the subsets are displayed.

I am wondering if there is a way to achieve the desired display or if I am doing something wrong. Currently, I am using react-map-gl geojson, which expects the data to be in a specific format.

I'd greatly appreciate any help.

type Coordinates = number[];
type PolygonCoordinates = Array<Array<Coordinates>>;
type MultiPolygonCoordinates = Array<Array<Array<Coordinates>>>;

interface Polygon {
	type: 'Feature';
	geometry: {
		type: 'Polygon';
		coordinates: PolygonCoordinates;
	};
	properties: properties;
}

interface MultiPolygon {
	type: 'Feature';
	geometry: {
		type: 'MultiPolygon';
		coordinates: MultiPolygonCoordinates;
	};
	properties: properties;
}

const multipolygons: { [index: string]: Polygon | MultiPolygon } = {};
console.log({ multipolygons });

for (const index in feeders) {
	const { geometry, properties } = feeders[index];

	if (geometry && geometry.coordinates) {
		if (geometry.type === 'MultiPolygon') { // MultiPolygonCoordinates
			multipolygons[index] = {
				type: 'Feature',
				geometry: {
					type: 'MultiPolygon',
					coordinates: geometry.coordinates as MultiPolygonCoordinates,
				},
				properties,
			};
		} else if (geometry.type === 'Polygon') { // PolygonCoordinates
			multipolygons[index] = {
				type: 'Feature',
				geometry: {
					type: 'Polygon',
					coordinates: geometry.coordinates[0] as PolygonCoordinates,
				},
				properties,
			};
		}
	}
}

<MapGl
	initialViewState={{ ...viewport }}
	mapStyle=''
	style={{
		position: 'relative',
		width: '100%',
		height: '67vh',
	}}
	mapboxAccessToken={import.meta.env.MAPBOX_TOKEN}
	attributionControl={false}
	interactive={true}
	onMove={(evt) => setViewport(evt.viewState)}
	onClick={onLayerClick}
>
	<FullscreenControl position='top-left' />
	<NavigationControl showCompass={true} position='bottom-left' />
	<>
		{Object.keys(multipolygons).map((key: string) => (
			<Source
				key={`geometry${key}`}
				type='geojson'
				data={multipolygons[key]}
			>
				<Layer
					id='feeders'
					type='fill'
					source='feeders'
					paint={{
						'fill-color': {
							property: 'feeder_id',
							stops: [
								[0, '#3288bd'],
								[1, '#66c2a5'],
								[2, '#abdda4'],
								[3, '#e6f598'],
								[4, '#ffffbf'],
								[5, '#fee08b'],
								[6, '#fdae61'],
								[7, '#f46d43'],
								[8, '#d53e4f'],
							],
						},
						'fill-opacity': 0.8,
					}}
				/>
			</Source>
		))}

	</>
</MapGl>