Как поменять класс для строки 'This task has no description' не меняя основного класса в React?

Нужно поменять цвет надписи 'This task has no description' на серый, эта строка если в таске нет описания, для остальных тасков с описанием цвет должен остаться таким же как в классе css.text. При клике на 'This task has no description' нужно вернуть обратно черный из css.text

<textarea className={css.text}>{task.description || 'This task has no description'}</textarea>

Вот компонент полностью

import { useParams, Link } from 'react-router-dom';
import { LIST_TYPES, LIST_COPY } from '../../config'
import { formatDate } from '../../utils'
import notFoundIcon from '../../assets/not-found.svg'
import exit from '../task-detail/exit.png';
import css from './TaskDetail.module.css'

const TaskDetail = (props) => {
    const match = useParams();
    const taskId = match.params
    const {tasks, setTasks} = props
    const params = useParams()
    const tasksList = JSON.parse(localStorage.getItem("tasks"))
    const task = tasksList.find((task) => task.id === params.taskId)

    const handleChange = (e) => {
        const newStatus = e.target.value
        const updatedTasks = tasks.map(task => {
            if (task.id === taskId) {
                return {...task, status: newStatus}
            }
            return task
        })
        setTasks(updatedTasks)
    }

    const renderTaskDetails = () => {
        return (
            <>
                <div className={css.header}>
                    <h2 className={css.title}>{task.title}</h2>
                    <Link to='/'><img src={exit} alt="exit" className={css.back}/></Link>
                </div>
                <p className={css.createdAt}>{formatDate(task.created)}</p>
                <div title="Change Description">
                    <textarea className={css.text}>{task.description || 'This task has no description'}</textarea>
                </div>
                <p className={css.label}>Change status:</p>
                <select className={css.select} onChange={handleChange} value={task.status}>
                    {Object.values(LIST_TYPES).map(list => {
                        return <option key={list} value={list}>{LIST_COPY[list]}</option>
                    })}
                </select>
            </>
        )
    }

    const renderEmptyState = () => {
        return (
            <div className={css.emptyState}>
                <h2>Task with ID <em>{taskId}</em> was not found</h2>
                <img className={css.emptyStateIcon} src={notFoundIcon} alt='' />
            </div>
        )
    }

    return (
        <>
            
            <div className={css.wrapper}>
                {task ? renderTaskDetails() : renderEmptyState()}
            </div>
        </>
    )
}

export default TaskDetail;