I keep getting my JSON data is undefined even though it can render to the UI (TSX)

Question

I have a simple tag that successfully displays JSON data.

<dd>{assessmentEntity.serialized}</dd>

I need to parse this data so it looks readable in the UI.

I kept getting an error that said the data is undefined so I used a console log to check.

const json2 = assessmentEntity.serialized;

console.log(json2);

Why is it saying that it is undefined but yet is able to render it? I can't do this or this successfully

const data = JSON.parse(assessmentEntity.serialized);
..
<dd>{JSON.parse(assessmentEntity.serialized)}</dd>

Here is the rest of my code.

export interface IAssessmentDetailProps extends StateProps, DispatchProps, RouteComponentProps<{ id: string }> {}

export const AssessmentDetail = (props: IAssessmentDetailProps) => {
  useEffect(() => {
    props.getEntity(props.match.params.id);
  }, []);

  const { assessmentEntity } = props;

  const json = '{ "fruit": "pineapple", "fingers": 10 }';
  const obj = JSON.parse(json);

  const json2 = assessmentEntity.serialized;
  
  /* eslint-disable no-console */
  console.log(json2);
  /* eslint-enable no-console */

  return (
    <div>
      <Row>
        <Col md="8">
          <h2>
            <Translate contentKey="waTpaApp.tpaAssessment.detail.title">Assessment</Translate> [<b> ID = {assessmentEntity.id}</b>] 
          </h2>
        </Col>
      </Row>

      <Row>
      Potential Enrollee Information
      </Row>

        <Row>
        <dl className="jh-entity-details">
          <dt>
            Last Name
          </dt>
          
        <dd>{assessmentEntity.serialized}</dd>
        <dt>
            First Name
          </dt>
        {/* <dd>{data.enrollee.firstName}</dd> */}
        </dl>

      </Row>

    </div>
  );
};

const mapStateToProps = ({ assessment }: IRootState) => ({
  assessmentEntity: assessment.entity,
});

const mapDispatchToProps = { getEntity };

type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;

export default connect(mapStateToProps, mapDispatchToProps)(AssessmentDetail);