Why can’t I assign percentage values to CSS using React Javascipt?

I have the following code which plots a bargraph component on the screen:

import '../styles/GraphBar.css'

function GraphBar({value, maxLength}) {

     const height = (value / maxLength) * 100 + "%"  
     const style = {height: height}

  return (

    <div className="graph-bar">

        <p className="graph-value">{value}</p>
        <div className="graph-picture" style={style}></div>

    </div>
)}

export default GraphBar

I know the program works if I give the values in pixels, problem is I need to use percentages for the height to have it be responsive no matter the size of the screen it’s viewed on. The above calculation gives the correct result, problem is it seems to refuse to interpret the percentage value and the code compiles as if no value was assigned as height, showing no bars. In fact, even if I write a random constant like “70%” as the height value directly into the style prop, it still refuses to interpret it, even though everywhere I looked they say that’s exactly how it should work. What is the issue here?