How to render a jsx element by sending it as a prop using react and javascript?

i want to render jsx element by passing it as a prop to a component using react and javascript.

below is my code,

const renderButton = (
    <button>Click me </button>
);

const renderResult = (
    {userPermissions.ADD && isInProgress && renderButton} //error here
); 

<SomeComponent
    renderResult={renderResult}
/>

the problem is with renderResult method. how can i render the renderButton. i think the way i am returning jsx element is not correct.

could someone help me with this. thanks.