Why This Css Class Condition Not Work In React Js?

I am trying to use CSS conditions in class react but its not working i don't know i applied 4 conditions but not working i don't know where is wrong.

Thanks

<td className="lom">
                  <span
                    className={
                      (`${c.overall_score <= 4 ? "summary" : ""}`,
                      `${c.overall_score <= 6 ? "orange" : ""}`,
                      `${c.overall_score <= 8 ? "speed" : ""}`,
                      `${c.overall_score <= 10 ? "dynamic" : ""}`)
                    }
                  >
                    {c.overall_score}
                  </span>
                </td>

Using ternary condition sample application

class App extends Component {
  render() {
    let arr = [
      { overall_score: 4 },
      { overall_score: 6 },
      { overall_score: 8 },
      { overall_score: 10 }
    ];

    return (
      <div>
        {arr.map(c => (
          <h3
            className={`${
              c.overall_score <= 4
                ? "summary"
                : c.overall_score <= 6
                ? "orange"
                : c.overall_score <= 8
                ? "speed"
                : c.overall_score <= 10
                ? "dynamic"
                : ""
            }`}
          >
            I'm colored
          </h3>
        ))}
      </div>
    );
  }
}