React not rendering component with inline styling on IOS

I ran into a problem with my component not re-rendering after a state change, when using props driven inline styling, on IOS/iphone (not tested on ipad).

Here is the code sandbox: https://codesandbox.io/s/confident-meitner-2sju9?file=/src/FlexboxGap.jsx

Edit: adding the code here too as requested:

import { useState } from "react";
import "./FlexboxGap.styles.css";

function FlexboxGap({ visible, containerCat, propertiesCat }) {
  const [gap, setGap] = useState(0);
  const [rowGap, setRowGap] = useState(0);
  const [columnGap, setColumnGap] = useState(0);

  function onGapChange(event) {
    setGap(event.target.value);
    setRowGap(event.target.value);
    setColumnGap(event.target.value);
  }
  function onRowChange(event) {
    setRowGap(event.target.value);
  }
  function onColumnChange(event) {
    setColumnGap(event.target.value);
  }

  return (
    <div className="main-container">
      <div>
        {" "}
        <div>gap: {gap}px</div>
        <input
          type="range"
          className="slider-bar"
          min={0}
          max={20}
          value={gap}
          onChange={onGapChange}
        />
      </div>
      <div>
        {" "}
        <div>row-gap: {rowGap}px</div>
        <input
          type="range"
          className="slider-bar"
          min={0}
          max={20}
          value={rowGap}
          onChange={onRowChange}
        />
      </div>
      <div>
        {" "}
        <div>column-gap: {columnGap}px</div>
        <input
          type="range"
          className="slider-bar"
          min={0}
          max={20}
          value={columnGap}
          onChange={onColumnChange}
        />
      </div>
      <div
        style={{
          width: "100vw",
          height: "250px",
          backgroundColor: "grey",
          display: "flex",
          flexFlow: "row wrap",
          justifyContent: "flex-start",
          alignContent: "flex-start",
          rowGap: `${rowGap}px`,
          columnGap: `${columnGap}px`
        }}
      >
        <div className="graph-item">item</div>
        <div className="graph-item">item</div>
        <div className="graph-item">item</div>
        <div className="graph-item">item</div>
        <div className="graph-item">item</div>
        <div className="graph-item">item</div>
        <div className="graph-item">item</div>
        <div className="graph-item">item</div>
        <div className="graph-item">item</div>
        <div className="graph-item">item</div>
        {/* This last invisible div is a hack to "force" react to re-render, by referencing the props rowGap and columnGap. 
        Otherwise, the rerender fails to happen on iphones. Working on Android
        and desktop */}
        <div className="hack-ghost">{`${rowGap}${columnGap}`}</div>
      </div>
    </div>
  );
}

export default FlexboxGap;

While the state of rowGap and rowColumn is successfully changed, as well as the style, the div that depends on it does not get updated on iphones (fully updated). Works on desktop and android devices.

I found a hack by adding a div that references the 2 states I need, and everything now "works".

The problem is:

1- it is hacky and

2-i am not sure i fully understand what is going on.

I thought of this hack by thinking that "i needed react to notice that the state changed inside this element".

Is it an issue with the way that inline css works // an ios implementation particularity?

Kind regards.