How to conditionally COMPLETELY OMIT an attribute in React

Question

I have the following element in my HTML in React:

<p className={`
    cbds-c-progressStepper__stepText${step.state === 'complete' ? 
    "--complete" : ""}${step.state === 'current' ? 
    "--current" : ""}${step.state === 'incomplete' ? 
    "--incomplete" : ""}`
      }
      aria-current={`${step.state === 'current' ? 'step' : ''}`}
>

I only want to include the 'aria-current' attribute on the current step. Otherwise, I don't want it to exist on the element at all.

Here's what I have tried:

1) aria-current={`${step.state === 'current' ? 'step' : ''}`}
2) aria-current={`${step.state === 'current' ? 'step' : **null**}`}
3) I have also tried creating a prop, setting it to false and then applying it to the attribute, which, according to what I have read, should completely omit the attribute from the element -- but that didn't happen. 

Number 1 set an empty aria-current attribute with no value. Like this: aria-current, but that goes against ADA compliance. It shouldn't be there at all.

Number 2 just set it to false. It shouldn't be there at all.

Can anyone please tell me how to make this happen in React?

Thanks!