I have an array like this:

const actions = [
    {
      header: "Money",
      type: "icon",
      icon: <Icon.DollarSign
        key={5}
          style={{
            display:  "block" ,
        }}
        size={20}
        color="#88CFE0"
        onClick={() => console.log('Dollar')}
        className="cursor-pointer"
      />
      ,
      visible: true,
    },
  ]

I’m trying to render that component inside another component in this way (I’m passing the “actions” object as a prop):

export const ActionsPersonalice = ({
  actions,
  action,
  data,
  validateDataPoa,
}) => {
    return (
        <>
          {actions.map((item, index) => {
            if (item.type == "button") {
              return (
                <button
                  key={index}
                  style={{
                    fontWeight: "400",
                    color: "#88CFE0",
                    textDecoration: "underline",
                    border: "none",
                    backgroundColor: "transparent",
                    display: item.visible ? "block" : "none",
                  }}
                  className="cursor-pointer"
                  type="button"
                >
                  {item.header}
                </button>
              );
            }
            if (item.type == "icon") {
               return item.icon
            }
          })}

But when I tried this, an error is raised:

Objects are not valid as a React child (found: [missing argument]). If
you meant to render a collection of children, use an array instead.

If I pass the icon inside an property directly (not inside the array), the component is rendered correctly.

Anyone knows how I can fix that behaviour when I use an array?

Thanks in advance.