reactjs – React Material UI Textfield with Thousands Separator

I want to format my textfield with a $ and thousands separators. I.e. $120,000 instead of 120000. I get two warnings:

1.) Warning: Failed prop type: The prop name is marked as required in ForwardRef(NumericFormatCustom), but its value is undefined.
at NumericFormatCustom (webpack-internal:///./src/components/TextFieldTest.js:43:26)

However, my name prop is defined.

2.) The specified value “$120,000” cannot be parsed, or is out of range.

When I type a number in my textfield, I get the same warning as #2, with the following console output.

CHANGED {formattedValue: ‘$6’, value: ‘6’, floatValue: 6}

How can I add thousands separators to my Material UI textfield?

import TextField from "@mui/material/TextField";
import React, { useState, useContext } from "react";
import { PropertyContext } from "components/PropertyContext";
import NumericFormat from "react-number-format";

const NumericFormatCustom = React.forwardRef(function NumericFormatCustom(
props,
ref
) {
const { onChange, ...other } = props;

const handleValueChange = (values) => {
    console.log("CHANGED ", values);
    const rawValue = values.value;
    const strippedValue = rawValue.replace(/[$,]/g, "");
    const parsedValue = parseInt(strippedValue);
    onChange({
    target: {
        name: props.name,
        value: parsedValue,
    },
    });
};

return (
    <NumericFormat
    {...other}
    getInputRef={ref}
    onValueChange={handleValueChange}
    thousandSeparator
    isNumericString
    prefix="$"
    />
);
});

export default function TextFieldTest(props) {
const { property } = useContext(PropertyContext);

return (
    <TextField
    label="react-number-format"
    value={values.numberformat}
    onChange={handleChange}
    name="numberformat"
    id="formatted-numberformat-input"
    InputProps={{
        inputComponent: NumericFormatCustom,
    }}
    variant="standard"
    />
);
}