How to prevent to add Null to className in if-statement

I create the ReactJS application, where I want to mark the max (green) and min (red) skill values for each profile.
Each span with a value has an initial class of "skill-value".
When I define the max and min values, I add "red" and "green" classes for span with the max and min values.
My code works, but for a value that is not equal to max or min, the class "null" is added. If I don't return null, it shows "undefined".

How can I improve my code so that all other values (except min and max) have only the initial class?

// my skillset.json
let skillset = {a: 4, b: 2, c: 2, d: 6}

class Main extends React.Component {
 render() {
  let arr = Object.values(this.props.skillset)
  let minVal = Math.min(...arr)
  let maxVal = Math.max(...arr)

  const checkVal = (val) => {
   if (val === maxVal) { return 'green' }
   if (val === minVal) { return 'red' }
   return null
 }
 return (
  {Object.keys(this.props.skillset).map((skill) => {
    return (
      <div className='skill' key={skill}>
        <span className={`skill-values ${checkVal(this.props.skillset[skill])}`}>
         {this.props.skillset[skill]}</span>
      </div>
     )
   })}
  )
 }
}