How to access nested JSON object in ReactJS State?

I have state:

{
studentId: 1,
studentName: "Student",
religion: {
  religionId: 1,
  religionName: "RELIGION"
 }
}

How to access religionName in react?

I have tried access my student state like this:

const {studentState} = useContext(StudentContext);

return (
 <div>
  {studentState.studentId}
  {studentState.studentName}
  {studentState.religion.religionName}
 </div>
);

Undifined result when using {studentState.religion.religionName}