I am working on a dice roller project that changes the faces of two die on a button click. The die is both a Font Awesome icon that changes the face given a given class Name (i.e "fas fa-dice-six" renders the side with six dots).

Here is the code I have so far for the DiceRoll component:

import "./RollDice.css";
import React, { useState } from "react";
import Die from "../Die/Die";

/**
 * @returns a parent component (rendered by App)
 * that renders the dice and a button to roll
 */

const RollDice = () => {
  let sides = ["one", "two", "three", "four", "five", "six"];
  /** sets both die faces to be one at initial render */
  let [dice, setDice] = useState({
    dieOne: "one",
    dieTwo: "one",
  });

  const handleRollClick = () => {
    /** variables for each die that generates a random number for the face */
    let randomDieOne = sides[Math.floor(Math.random() * sides.length)];
    let randomDieTwo = sides[Math.floor(Math.random() * sides.length)];

    /** sets the state of each die to a random number on click */
    setDice({ dieOne: randomDieOne, dieTwo: randomDieTwo });
    console.log("randomDieOne:", randomDieOne);
    console.log("randomDieTwo:", randomDieTwo);
  };

  return (
    <div>
      <Die face={dice.dieOne} />
      <Die face={dice.dieTwo} />
      <button onClick={handleRollClick}>Roll Dice</button>
    </div>
  );
};

export default RollDice;

Here is the code I have so far for the DiceRoll component:

import React, { useState } from "react";
import RollDice from "../RollDice/RollDice";
import "./Die.css";

/**
 * @returns an individual die that takes props and
 * displays the correct face of the die based on props
 */

const Die = ({ face }) => {
  console.log("face", face);
  return (
    <div className="dice die-icon">
      <i className={`fas fa-dice-${face}`}></i>
    </div>
  );
};

export default Die;

I have a handler for clicking the "roll" button that updates the state of the number string at the end of the icon's class Name. When I log out the updated state of the die, new random numbers are logged out, however, the changes are not rendering on the screen, meaning that the class Names for the icons are not changing when the button is clicked.

Does anyone see where I may have gone wrong?