I'm having a strange problem; and haven't been able to get a solution for it.

Context: NextJS App. I have 5 different svgs, and created some Icon components with them:

import React from 'react';
import { ReactComponent as NoReactionSvg } from './img/no-reaction.svg';
import { ReactComponent as OkSvg } from './img/ok.svg';
import { ReactComponent as QuestionSvg } from './img/question.svg';
import { ReactComponent as ToolSvg } from './img/tool.svg';
import { ReactComponent as TrophySvg } from './img/trophy.svg';

const Icon = ({ size = 'medium', color = 'currentColor', style, children, ...props }) => {
  const sizes = {
    small: '16px',
    medium: '24px',
    large: '32px',
  };

  return React.cloneElement(children, {
    width: sizes[size],
    height: sizes[size],
    color,
    style,
    ...props,
  });
};

export const NoReactionIcon = (props) => (
  <Icon {...props}>
    <NoReactionSvg />
  </Icon>
);

export const OkIcon = (props) => (
  <Icon {...props}>
    <OkSvg />
  </Icon>
);

export const QuestionIcon = (props) => (
  <Icon {...props}>
    <QuestionSvg />
  </Icon>
);

export const ToolIcon = (props) => (
  <Icon {...props}>
    <ToolSvg />
  </Icon>
);

export const TrophyIcon = (props) => (
  <Icon {...props}>
    <TrophySvg />
  </Icon>
);

And I'm trying to use these components like this:

<div><TrophyIcon /></div>
<div><ToolIcon /></div>
<div><QuestionIcon /></div>
<div><NoReactionIcon /></div>
<div><OkIcon /></div>

Problem is, it's not working as expected. As you can see, I have 5 components; but it's only rendering the first 3 (the other 2 are omitted).

Now, if I move the 4th icon to the top, suddenly it renders! But still the last one is not being rendered.

And If I move it to the top, suddenly the 2nd icon is not being rendered anymore.

I'm totally clueless about what's going on with this. Maybe is it a configuration on nextjs? Or maybe I'm creating these svg components wrong?