How a write a function that receives a component then adds some parameter to it then returns the new component

I want to write a function that will take the Icon component. I am using lucide-react here.

Here I wrote the function

const withIcon = (OriginalComponent) => {
  return function NewComponent() {
    return <OriginalComponent className='text-blue-400' />;
  };
};

And my input component is this

import { cn } from '@/lib/utils';
import React, { HtmlHTMLAttributes } from 'react';

interface CompType {
  icon?: React.ReactNode;
}

export default function Input({
  className,
  icon,
  ...props
}: HtmlHTMLAttributes<HTMLInputElement> & CompType) {
  return (
    <div className='shadow-md hover:shadow-lg transition-all px-6 flex items-center h-14 text-4xl rounded-full overflow-hidden'>
      <input {...props} className={cn('outline-none grow', {}, className)} />
      {withIcon(icon)}
    </div>
  );
}

And from here I am passing my Icon

import Input from '@/components/atoms/input';
import { User2 } from 'lucide-react';

export default function Login() {
  return (
    <section className='container'>
      <Input placeholder='email' icon={<User2 />} />
    </section>
  );
}

It gives a error like this, "Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it."

How to fix this, thanks in advance.

I would simply create a React Component that takes the Lucide FC wrapper as prop.

Example:

import { LucideProps, UserPlus } from 'lucide-react';

function Icon({ icon: Icon }: { icon: React.FC<LucideProps> }) {
  return <Icon className="text-blue-400" />;
}

export default function Login() {
  return (
    <div>
      Some content <Icon icon={UserPlus} />
    </div>
  );
}

Bonus tip: I suggest organizing your Icon import/exports by creating a dedicated file instead of directly using them in your React components. For example, you can create an icons.tsx file where you re-export Lucide Icons with an optional wrapper. This approach allows you to easily incorporate icons from various libraries or add your own custom brand icons while maintaining a consistent interface. It also simplifies the process of swapping out icons in the future.