React open collapse when the selected student is greater than 0

What I want is when the studentCount is greater than zero then the collapse automatic open and the Typography(viewStudentList) will 'Close', and when the studentCount is equal to zero then the collapse are close and the text on Typography(viewStudentList) 'View',

const onHandleSetViewStudentList = () => {
    if (!viewStudentList) {
      mapDiv.current.popup.close();
    }

    if (viewStudentList) {
      onHandleSetActiveStudent('');
    }

    setViewStudentList(!viewStudentList);
  };

<StudentWidget
   setViewStudendList={onHandleSetViewStudentList}
   viewStudentList={studentList.length > 0 ? true : false}
   countStudent={studentList.length}
/>

///

const propTypes = {
  countStudent: PropTypes.func,
  viewStudentList: PropTypes.bool,
};

const defaultProps = {
  countStudent:''
  viewStudentList: false,
};
const StudentWidget = ({
  countStudent,
  viewStudentList,
}) => {
   ....
   <Typography sx=>
       {viewStudentList ? 'Close' : 'View'}
   </Typography>
   <Collapse in={viewStudentList} sx=>
      .....
   </Collapse>
}

in this update i can show the studentlists if the studentCount is greater than zero but the only problem is the button doesnt work. the button function is it will close the collapse and view collapse

from React open collapse when the selected student is greater than 0