How to implement text mask in MUI Textfield

Question

So I want to implement a mask to my mui Textfields for price and credit card number, but idk how. For example I want the price texfield to start with "$", and the card number to be separated with "-". I've tried the things from this topic , but it doesn't work. Here is one of my textfields:

<TextField
  required
  className="form__input"
  id="price"
  name="price"
  value={formData.price}
  label="Ticket Price"
  variant="outlined"
  type="number"
  onChange={(event) => eventHandleChange(event)}
  error={!/(^$)|(^[+]?\d+([.]\d+)?$)/.test(formData.price)}
  helperText={
    !/(^$)|(^[+]?\d+([.]\d+)?$)/.test(formData.price) &&
    validations.positiveNumbersOnly
  }
/>