How to show/hide divs when a if/else condition is met in ReactJS from a data coming from JSON?

How can a div be shown/hidden when a condition is met in React, when the data comes from a JSON array? I've got this code so far, but when I change the value of isPassed={resultPass.pass} to isPassed={resultPass.failed} it still shows the result as pass.

The closest example I've found is this, but it does not fetch value from a JSON ( var resultPass in my code), but just assigns true/false value to a const.

var resultPass = {
  "pass": "passpass",
  "fail": "failfail"
}

function Passed(props) {
  return <div class="result-pass"><h3>passpass</h3></div>;
}

function Failed(props) {
  <div class="result-fail"><h3>failfail</h3></div>;
} 

function ResultDisplay(props) {
  const isPassed = props.isPassed;
  if (isPassed) {
    return <Passed />;
  } 
  return <Failed />;
}

// When resultPass.pass is changed resultPass.fail it still shows as pass
render(<ResultDisplay isPassed={resultPass.pass} />, document.getElementById('root'));

Here is my Codesandbox.