How to fix Component has no displayName but is being exported in React

import React from 'react';

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  (props, ref) => {
    return <button ref={ref} {...props} />;
  }
);

// Add this line
Button.displayName = 'Button';

export default Button;

import React from 'react';

const ExpensiveComponent: React.FC<Props> = ({ data }) => {
  // Component logic
  return <div>{data}</div>;
};

const MemoizedComponent = React.memo(ExpensiveComponent);
MemoizedComponent.displayName = 'ExpensiveComponent';

export default MemoizedComponent;

ExpensiveComponent.displayName = 'ExpensiveComponent';
const MemoizedComponent = React.memo(ExpensiveComponent);

import React from 'react';

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  (props, ref) => {
    return <input ref={ref} {...props} />;
  }
);

// Apply forwardRef first, then memo
const MemoizedInput = React.memo(Input);

// Use hierarchical naming
MemoizedInput.displayName = 'memo(Input)';

export default MemoizedInput;

function withSubscription<P extends object>(
  WrappedComponent: React.ComponentType<P>
) {
  const ComponentWithSubscription: React.FC<P> = (props) => {
    // HOC logic
    return <WrappedComponent {...props} />;
  };

  // Get wrapped component name
  const wrappedName =
    WrappedComponent.displayName ||
    WrappedComponent.name ||
    'Component';

  // Set hierarchical displayName
  ComponentWithSubscription.displayName =
    `withSubscription(${wrappedName})`;

  return ComponentWithSubscription;
}

// Usage
const CommentList: React.FC = () => <div>Comments</div>;
CommentList.displayName = 'CommentList';

export default withSubscription(CommentList);
// Shows as "withSubscription(CommentList)" in DevTools

// Before: Anonymous arrow function
export default React.forwardRef((props, ref) => {
  return <button ref={ref} {...props} />;
});

// After: Named function declaration
export default React.forwardRef(function Button(props, ref) {
  return <button ref={ref} {...props} />;
});

module.exports = {
  rules: {
    // Disable entirely (not recommended)
    'react/display-name': 'off',

    // Or configure with options
    'react/display-name': [
      'warn', // Change from 'error' to 'warn'
      {
        ignoreTranspilerName: false,
        checkContextObjects: false, // Don't check Context objects
      },
    ],
  },
};

// eslint-disable-next-line react/display-name
export default React.forwardRef((props, ref) => {
  return <button ref={ref} {...props} />;
});