javascript get output of css calc ( a css var that refers to other css vars)

Question

I'd like to get the evaluated output of a css calc that refers to vars from parent elements. For example, the example below should log 21 not NaN. Is there a way to do this?

let outer = document.getElementById('outer')
let inner = document.getElementById('inner')

outer.style.setProperty('--A',7)
inner.style.setProperty('--B',3)
inner.style.setProperty('--C','calc (var(--A) * var(--B))')

let a = Number(getComputedStyle(inner).getPropertyValue('--C'))

console.log(a)
//is there a way to log '21' as opposed to NaN?

<div id="outer">
  <div id="inner">
  </div>
 </div>