How to create a similar money input?

[ghost]

Describe the issue and the actual behavior

This is my actual code that I'm using now and after I put the cursor at the end I can't enter anything, how can I get around it?

<NumericFormat
          prefix="$"
          value={formik.values.value || '00.00'}
          error={!!formik.errors.value}
          onValueChange={handleChange}
          valueIsNumericString={true}
          wrapperInput={styles.numberFormat}
          decimalScale={2}
          fixedDecimalScale={true}
          disabled={!isCustomAmount}
          allowLeadingZeros={true}
          isAllowed={({ floatValue }) => {
            return (
              floatValue === undefined || +floatValue < MAX_LIMIT_PAYMENT_PLAN
            );
          }}
          classes={{
            root: clsx(styles.inputPaymentPlan, {
              [styles.statementAmount]: !isCustomAmount,
            }),
            input: styles.inputSum,
            underline: styles.underlineHide,
          }}
          variant="standard"
          customInput={CustomInput}
        />

Describe the expected behavior

I expect that after the course is set at the end it will be possible to enter the amount

Provide a CodeSandbox link illustrating the

Screen.Recording.2023-10-20.at.18.18.17.mov

issue