Conditional Rendering inside the Component

I have a Semantic UI Modal in separate component and I am calling in another component. This is working fine.

If I add a if condition inside the Modal it's throwing an error.

Below is my code.

Modal.js

import React from 'react'
import { Button, Icon, Modal as SemanticModal} from 'semantic-ui-react'

const Modal = ({trigger, header, size, dimmer, content, actions}) => (
    <SemanticModal
        trigger={trigger}
        size={size}
        dimmer={dimmer}
        header={header}
        content={content}
        actions={actions}
      />
    )

export default Modal;

App.js

<Modal
    trigger={<a>Link</a>}
    size={'small'}
    dimmer={'blurring'}
    header={result===""?"<Header icon='spinner loading'/>":"<Header content='Result' />"}
    content={result===""?"<p>Loading...</p>":"<p>showing the result</p>"}
/>

The above one is working fine.

But the below one is not working

App.js

<Modal
    trigger={<a>Link</a>}
    size={'small'}
    dimmer={'blurring'}

    {
       publishStatus=="" ? (
            header="<Header icon='spinner loading'/>"
            content="Loading..."
       ) : (
            header="<Header content='Result' />"
            content="showing the result"
       )
    }


    header={result===""?"<Header icon='spinner loading'/>":"<Header content='Result' />"}
    content={result===""?"<p>Loading...</p>":"<p>showing the result</p>"}
/>

What is wrong in the above method?