using If/Else statement in ReactJs to return a component

Here is courseButton.jsx:

import React from "react"
import styles from "./styles.module.scss"
import {MenuFoldOutlined, MenuUnfoldOutlined} from '@ant-design/icons'


export default (props) => {
    const {collapsed, onClick} = props

    return (
        <>
            {collapsed ? MenuUnfoldOutlined : MenuFoldOutlined}
        </>
    )
}

Both of my components have the same props. So I want to avoid coding like this:

import React from "react"
import styles from "./styles.module.scss"
import {MenuFoldOutlined, MenuUnfoldOutlined} from '@ant-design/icons'


export default (props) => {
    const {collapsed, onClick} = props

    return (
        <>
            {collapsed ? 
                <MenuUnfoldOutlined className={styles.trigger} onClick={onClick}/> : 
                <MenuFoldOutlined className={styles.trigger} onClick={onClick}/> }
        </>
    )
}

So how I can give the selected component the style in one line code.

I want something like this code.