プログレスバーと%表記の進捗がずれてしまう(プログレスバーが遅れる)

前提・実現したいこと

https://material-ui.com/components/progress/
material ui progress barのLinear with labelを用いて、プログレスバーを表示させたい。

発生している問題・エラーメッセージ

プログレスバーと%表示に時間変化でなくて、関数の実行状況によって0~100まで変化する変数を入れたところ、プログレスバーと%表示の進捗がずれてしまう。

該当のソースコード

TypeScript React

// -- type declaration --
interface Props {
  value: number;
}

// -- main component --

const ProgressBar: React.FC<Props> = props => {

  //  -- local states --
  const [progress, setProgress] = useState(0) // props.valueは0~100まで変化します。
  // -- redux preparations --
  const dispatch = useDispatch();
  // -- handlers --
  const _handleCancel = () => {
    dispatch(systemModule.actions.onProgress(false))
    dispatch(systemModule.actions.inProgressValue(0))
  };

  // -- on function --
  useEffect(() => {
    setProgress(props.value)
  }, [props.value])

  // -- render part --
  return (
    <>
      <div style={{width: "100%"}}>
        <Box display="flex" alignItems="center">
          <Box width="100%" mr={1}>
            <LinearProgress variant="determinate" value={Math.floor(progress)}/>
          </Box>
          <Box minWidth={35}>
            <Typography variant="body2" color="textSecondary">{Math.floor(progress)}%</Typography>
          </Box>
        </Box>
        <Button onClick={() => _handleCancel()}>キャンセル</Button>
      </div>
    </>
  );
}