Is the following form of functional components valid?

Pretty new to React here. Thus far, I’ve only been using components that either take no arguments or props. Then, I always render the component using the form <SomeComponent {...props}/>

However, I came across a situation where I didn’t even realize that some of the functions I was creating were actually functional components since they were returning JSX. However, they were visibly different from the way I’m used to making and using components. It looked something like this:

  const MoneyExample = (category, amount) => {
    if (typeof amount !== "number" || typeof category !== "string") {
      return;
    }
    return (
      formatter.format(amount) !== "$0" && (
        <>
          <h4>{category.charAt(0).toUpperCase() + category.slice(1)}</h4>
          <p>{formatter.format(amount)}</p>
        </>
      )
    );
  };

and then rendering it inside another component using like this

{MoneyExample("Budget", someAmount)}

instead of the more common form

<MoneyExample budget={"Budget"} amount={someAmount} />

I’ve tried looking around for info, but I’m not even really sure how to phrase the question. Is this type of thing against React’s principles or completely fine? Sorry if this is obvious to some.