Как исправить ошибку Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Question

[Martovitskiy]

Получаю ошибку Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
как исправить?

class Personal extends Component {
 constructor(props) {
        super(props);

        this.state = {
            iconLoading: false,
            data: {
                name: null,
                email: null,
                userData: {
                    currency_id: null,
                    contacts: {},
                    hold: 0,
                    reason_of_ban: null,
                    banned: false,
                    ref_income_percent: 0,
                },
            },
            avatar_upload_image_id: null,
            new_avatar: null,
            isNew: !props.user_id,
        };
    }

    render() {
        const {iconLoading, new_avatar, data, isNew} = this.state;
        const banned = this.props.form.getFieldValue("userData.banned");
        const {className} = this.props;
        const classes = classNames(
            "content-block__item--without-filter",
            "personal-page",
            className
        );

        return (
            <div className={classes}>
                <Form onSubmit={this.handleSubmit}>
                    <Row>
                        <Col xs={6}>
                            {this.validator(
                                "userData.time_offset",
                                "Часовой пояс",
                                <TimeZoneSelect/>
                            )}
                        </Col>
                    </Row>
                </Form>
            </div>
        );
    }

}

export default connect((state) => pick(state, "user"))(Form.create()(Personal));