Example of how to use tinymce as controlled component by formik with text field material-ui

FormWithTinymce.tsx

import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';

import EditorField from './EditorField';

type InitialValuesFormikType = {
  editor: string;
};

const Form: React.FC = () => {
  const formik = useFormik<InitialValuesFormikType>({
    initialValues: {
      editor: '',
    },
    validationSchema: formSchema,
    onSubmit: (submitValues) => {
      return;
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <TextField
        label="Editor"
        fullWidth
        error={Boolean(formik.errors.editor)}
        helperText={formik.touched.editor && formik.errors.editor}
        InputLabelProps={{ shrink: true }}
        InputProps={{
          inputComponent: EditorField,
          inputProps: { ...formik.getFieldProps('editor'), setFieldValue: formik.setFieldValue }
        }}
      />

      <Button variant="contained" color="primary" type="submit" disabled={formik.isSubmitting || !formik.isValid}>
        Send
        </Button>
    </form>
  );
};

const formSchema = Yup.object().shape({
  editor: Yup.string().trim().required('* required'),
});

export default Form;

TinymceEditorField.tsx

import React from 'react';
import styled from 'styled-components';
import { Editor } from '@tinymce/tinymce-react';
import { TextFieldProps } from '@material-ui/core/TextField';

type EditorFieldProps = {
  setFieldValue: (field: string, value: string) => any;
} & TextFieldProps;

const EditorField: React.FC<MessageEditorFieldProps> = (props) => {
  const handleEditorChange = (content: string) => {
    props.setFieldValue(props.name! , content);
  };

  return (
    <Wrapper>
      <Editor
        id='editor'
        apiKey={process.env.TINYMCE_KEY}
        toolbar='undo redo | styleselect | bold italic underline | fontselect | fontsizeselect | alignleft aligncenter alignright alignjustify | outdent indent'
        init={{
          selector: 'textarea',
          menubar: false,
          branding: false,
          auto_focus: false,
          forced_root_block: 'div',
          elementpath: false,
          font_formats: 'TT Norms=TTNorms-Regular; Arial=arial, helvetica, sans-serif; Calibri=calibri; Times New Roman=times new roman, times; Verdana=verdana, geneva;',
          fontsize_formats: '10pt 12pt 14pt 16pt 18pt 20pt',
        }}
        onEditorChange={handleEditorChange}
        value={String(props.value)}
      />
    </Wrapper>
  )
};

const Wrapper = styled.div`
  flex: 1;
  margin-top: 8px;
`;

export default EditorField;