Inside a Canvas I am rendering a 3D model for every element in reservedHomeLocations, like this:
<Canvas longitude={startingLngLat.lng} latitude={startingLngLat.lat} overlay>
{reservedHomeLocations?.map((l, idx) => {
const modelPath = getHomeAttributesObj(l.homeTypeId)?.modelPath;
return (
<Coordinates
key={idx}
latitude={l.coordinates[1]}
longitude={l.coordinates[0]}
>
<Suspense fallback={<></>}>
<object3D>
{modelPath && <HomeModel3D modelPath={modelPath} />}
</object3D>
</Suspense>
</Coordinates>
);
})}
<Canvas/>
The problem is, despite reservedHomeLocations being multiple elements long, only one 3D model (the last one) shows up. The model paths are the same, the coordinates are all different.
No errors in the console.