react js function execute correctly on the console but not change on the page [duplicate]

i am a beginner when i console log a verbal multiply(inside handleMultiply) it's shows the 'red' on the console but the color not change when reach to number 2

import React, { useState } from "react";

function App() {
  const times = [1, 2, 3, 4, 5, 6, 7, 8, 10, 100];
  let [multiply, setmultypli] = useState();

  function handleMuliply(event) {
    setmultypli(+event.target.value); //<== good logic

    let changeColor = {
      color: "red",
    };
    if (multiply == 2) {
      multiply = changeColor.color;
      console.log(multiply);
    }
  }

  return (
    <div>
      <h1>Multiplication Table {multiply}</h1>
      <input type="number" value={multiply} placholder="number " onChange={handleMuliply} />
      <ul>
        {times.map((t) => {
          return (
            <li key={t}>
              {t} * {multiply} = {t * multiply}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

source https://stackoverflow.com/questions/73393125/react-js-function-execute-correctly-on-the-console-but-not-change-on-the-page