button to act as checkbox and change styles?

Here is a simple way to do that. It is working.

const displayScores = e => {
            if (e.target.innerHTML === '+') {
                document.querySelector('.display-score-container').style.display =
                    'none';
                e.target.innerHTML = '-';
            } else {
                document.querySelector('.display-score-container').style.display =
                    'block';
                e.target.innerHTML = '+';
            }
        };

Of course this is not the only solution. It depends on your hole project. Hope that I helped you. Have a nice day :)

You can track the displayScore using the React.useState and update the template based on the state.

const [displayScore, setDisplayScore] = React.useState(true);

const handleDisplayScores = (e) => {
    setDisplayScore(!displayScore);
  };
          

return (
   <div className="student-container">
              <img className="student-img" src={students.pic} />
              <div className="student-column">
                <p className="student-item">
                  {" "}
                  {students.firstName} {students.lastName}
                </p>
                <p className="student-item">Email: {students.email}</p>
                <p className="student-item">Company: {students.company}</p>
                <p className="student-item">Skill: {students.skill}</p>
                <p className="student-item">Average: {average}%</p>

                {displayScore && (<div  className="display-score-container">
                  <p className="student-score">
                    Test 1:{" "}
                    <p className="student-percentage">{students.grades[0]}% 
                     </p>
                  </p>
                </div>)}

              </div>

              <button  
                onClick={handleDisplayScores}
                className="expand-btn">
                {displayScore ? '-' : '+'}  // set based on your use case.
              </button>
)

You can use 'active' class or some class for that and write css for that particular Class Name. On click add that class to the button and toggle the values. and put the condition on the class you have added if (active){..} else{..}.