why value attribute of input not changing?

I am using react to create multiple rows of input, whose value is initially equal what I am getting back in a fetch request.

the above picture shows the value I am getting back from fetch, but when I change the page using the pagination button in the right bottom. Everything changes according to the new request except for the values of inputs.

const ContentRowTipJar = (props) => {
  const [isChanged, setIsChanged] = useState(false);
  const [tipJarPrice, setTipJarPrice] = useState({
    low: props.low,
    med: props.med,
    high: props.high,
  });

  const handleChange = (e) => {
    setIsChanged(true);

    setTipJarPrice({
      ...tipJarPrice,
      [e.target.name]: parseFloat(e.target.value),
    });
  };

  const handleBlur = () => {
    if (isChanged) {
      props.onTipJarChange(tipJarPrice);
    } else {
      console.log("change price to submit!");
    }
  };

 let classes = `${props.className} ${styles["tipjar"]}`;
  return (
    <>
      <td className={classes}>
        <input
          id={`low_${props.id}`}
          type="number"
          name="low"
          min="0"
          step="0.01"
          onChange={handleChange}
          onBlur={handleBlur}
          value={tipJarPrice.low}
          className={styles["contentrowprice-input"]}
        />
      </td>
      <td className={classes}>
        <input
          id={`mid_${props.id}`}
          type="number"
          name="mid"
          min="0"
          step="0.01"
          onChange={handleChange}
          onBlur={handleBlur}
          value={tipJarPrice.med}
          className={styles["contentrowprice-input"]}
        />
      </td>
      <td className={classes}>
        <input
          id={`high_${props.id}`}
          type="number"
          name="high"
          min="0"
          step="0.01"
          onChange={handleChange}
          onBlur={handleBlur}
          value={tipJarPrice.high}
          className={styles["contentrowprice-input"]}
        />
      </td>
    </>
  );
};