React MUI - prevent onWheel from changing a focused input type number

TextFieldExt.js

import { TextField } from '@mui/material';
import { useRef } from 'react';

export default function TextFieldExt(props) {
  const { type } = props;
  const noStupidWheelScroll = type === 'number';
  const thisTextField = useRef(null);
  const noOnWheelFn = (wheelEv) => {
    wheelEv.preventDefault();
  };
  const wheelScrollOpts = noStupidWheelScroll
    ? {
        onFocus: () => {
          thisTextField.current.addEventListener('mousewheel', noOnWheelFn);
        },
        onBlur: () => {
          thisTextField.current.removeEventListener('mousewheel', noOnWheelFn);
        },
      }
    : {};
  return <TextField ref={thisTextField} {...wheelScrollOpts} {...props} />;
}

UsageExample.txt

<TextFieldExt
  min="0"
  type="number"
  label="Budget Amount"
  name="BudgetAmount"
  onChange={(e) => {
    // ... typical MUI onChange event
  }}
  value={prop.defaultAmount || 0}
/>