How to use the @material-ui/utils.getDisplayName function in @material-ui/utils

export default function withForwardedRef(Component) {
  const ForwardRefComponent = React.forwardRef((props, ref) => (
    // We expect this component to be wrapped in `withStyles` in which `innerRef`
    // is already intercepted and therefore won't appear in `props` here.
    
  ));

  if (process.env.NODE_ENV !== 'production') {
    ForwardRefComponent.displayName = `ForwardRef(${getDisplayName(Component)})`;
  }

  return hoistNonReactStatics(ForwardRefComponent, Component);
}

return null;
      // return new Error(
      //   'Material-UI: the `innerRef` prop is deprecated and will be removed in v5. ' +
      //     'Refs are now automatically forwarded to the inner component.',
      // );
    }),
  };

  // The wrapper receives only user supplied props, which could be a subset of
  // the actual props Component might receive due to merging with defaultProps.
  // So copying it here would give us the same result in the wrapper as well.
  WithStyles.defaultProps = Component.defaultProps;

  if (process.env.NODE_ENV !== 'production') {
    WithStyles.displayName = `WithStyles(${getDisplayName(Component)})`;
  }

  hoistNonReactStatics(WithStyles, Component);

  if (process.env.NODE_ENV !== 'production') {
    // Exposed for test purposes.
    WithStyles.Naked = Component;
    WithStyles.options = options;
    WithStyles.useStyles = useStyles;
  }

  return WithStyles;
};

if (process.env.NODE_ENV !== 'production' && Component === undefined) {
      throw new Error(
        [
          'You are calling styled(Component)(style) with an undefined component.',
          'You may have forgotten to import it.',
        ].join('\n'),
      );
    }

    let classNamePrefix = name;

    if (process.env.NODE_ENV !== 'production') {
      if (!name) {
        // Provide a better DX outside production.
        const displayName = getDisplayName(Component);
        if (displayName !== undefined) {
          classNamePrefix = displayName;
        }
      }
    }

    const stylesOrCreator =
      typeof style === 'function'
        ? theme => ({ root: props => style({ theme, ...props }) })
        : { root: style };

    const useStyles = makeStyles(stylesOrCreator, {
      Component,
      name: name || Component.displayName,
      classNamePrefix,
      ...stylesOptions,

if (Component === undefined) {
      throw new Error(
        [
          'You are calling withStyles(styles)(Component) with an undefined component.',
          'You may have forgotten to import it.',
        ].join('\n'),
      );
    }
  }

  let classNamePrefix = name;

  if (process.env.NODE_ENV !== 'production') {
    if (!name) {
      // Provide a better DX outside production.
      const displayName = getDisplayName(Component);
      if (displayName !== undefined) {
        classNamePrefix = displayName;
      }
    }
  }

  const useStyles = makeStyles(stylesOrCreator, {
    defaultTheme,
    Component,
    name: name || Component.displayName,
    classNamePrefix,
    ...stylesOptions,
  });

  const WithStyles = React.forwardRef(function WithStyles(props, ref) {
    const { classes: classesProp, innerRef, ...other } = props;

return function componentDidUpdate() {
    const displayName = getDisplayName(this._reactInternalFiber.type);
    instance.updates.push({
      displayName,
    });
  };
}

if (process.env.NODE_ENV !== 'production') {
      if (!baseClasses[key] && newClasses[key]) {
        console.error(
          [
            `Material-UI: the key \`${key}\` ` +
              `provided to the classes prop is not implemented in ${getDisplayName(Component)}.`,
            `You can only override one of the following: ${Object.keys(baseClasses).join(',')}.`,
          ].join('\n'),
        );
      }

      if (newClasses[key] && typeof newClasses[key] !== 'string') {
        console.error(
          [
            `Material-UI: the key \`${key}\` ` +
              `provided to the classes prop is not valid for ${getDisplayName(Component)}.`,
            `You need to provide a non empty string instead of: ${newClasses[key]}.`,
          ].join('\n'),
        );
      }
    }

    if (newClasses[key]) {
      nextClasses[key] = `${baseClasses[key]} ${newClasses[key]}`;
    }
  });

function mergeClasses(options = {}) {
  const { baseClasses, newClasses, Component } = options;

  if (!newClasses) {
    return baseClasses;
  }

  const nextClasses = { ...baseClasses };

  if (process.env.NODE_ENV !== 'production') {
    if (typeof newClasses === 'string') {
      console.error(
        [
          `Material-UI: the value \`${newClasses}\` ` +
            `provided to the classes prop of ${getDisplayName(Component)} is incorrect.`,
          'You might want to use the className prop instead.',
        ].join('\n'),
      );

      return baseClasses;
    }
  }

  Object.keys(newClasses).forEach(key => {
    if (process.env.NODE_ENV !== 'production') {
      if (!baseClasses[key] && newClasses[key]) {
        console.error(
          [
            `Material-UI: the key \`${key}\` ` +
              `provided to the classes prop is not implemented in ${getDisplayName(Component)}.`,
            `You can only override one of the following: ${Object.keys(baseClasses).join(',')}.`,

export default function withFormControlContext(Component) {
  const EnhancedComponent = React.forwardRef((props, ref) => (
    
      {context => }
    
  ));

  if (process.env.NODE_ENV !== 'production') {
    EnhancedComponent.displayName = `WithFormControlContext(${getDisplayName(Component)})`;
  }

  hoistNonReactStatics(EnhancedComponent, Component);

  return EnhancedComponent;
}

* For instance, you could be using the user-agent or the client-hints.
     * https://caniuse.com/#search=client%20hint
     */
    initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
    /**
     * @ignore
     */
    theme: PropTypes.object,
    /**
     * Bypass the width calculation logic.
     */
    width: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
  };

  if (process.env.NODE_ENV !== 'production') {
    WithWidth.displayName = `WithWidth(${getDisplayName(Component)})`;
  }

  hoistNonReactStatics(WithWidth, Component);

  return WithWidth;
};

Object.keys(newClasses).forEach(key => {
    warning(
      baseClasses[key] || !newClasses[key],
      [
        `Material-UI: the key \`${key}\` ` +
          `provided to the classes property is not implemented in ${getDisplayName(Component)}.`,
        `You can only override one of the following: ${Object.keys(baseClasses).join(',')}.`,
      ].join('\n'),
    );

    warning(
      !newClasses[key] || typeof newClasses[key] === 'string',
      [
        `Material-UI: the key \`${key}\` ` +
          `provided to the classes property is not valid for ${getDisplayName(Component)}.`,
        `You need to provide a non empty string instead of: ${newClasses[key]}.`,
      ].join('\n'),
    );

    if (newClasses[key]) {
      nextClasses[key] = `${baseClasses[key]} ${newClasses[key]}`;
    }
  });