How to use with material-ui TextField and React-Final-Form?

I want use material-ui TextField like skin for Cleave and RFF for form. Can you help me?

import React from "react";
import Cleave from "cleave.js/react";
import TextField from "material-ui/TextField";

export default ({
  input: { name, onChange, value, ...restInput },
  meta,
  ...rest
}) => (
  <TextField
    {...rest}
    name={name}
    helperText={meta.touched ? meta.error : undefined}
    error={meta.error && meta.touched}
    inputProps={restInput}
  >
    <Cleave name={name} onChange={onChange} value={value}/>
  </TextField>
);

[popuguytheparrot]

@bogdansoare @ofarukcaki

import React from "react";
import Cleave from "cleave.js/react";
import { TextField } from "@material-ui/core";

function MaskedTextField(props) {
  const { options, inputRef, ...other } = props;
  return <Cleave {...other} ref={inputRef} options={options} />;
}

export default ({
  input: { name, onChange, value, ...restInput },
  meta,
  options,
  ...rest
}) => 
    <TextField
      {...rest}
      name={name}
      onChange={onChange}
      value={value}
      error={meta.error && meta.touched}
      helperText={meta && meta.touched ? meta.error : undefined}
      inputProps={{ ...restInput, options, value }}
      InputProps={{
        inputComponent: MaskedTextField
      }}
    />
  );
};

Need create adapter with cleave.js. CleaveTextField it is adapter like in example in RFF.

[wellyal]

Is there a way to keep the Material-UI design. I mean I did exactly like in your example but the input rendered wasn’t anything like the material-UI input.