Error while compling ConfigEditor.tsx in DataSourceHttpSettings

[fekkydev]

As i’m getting error when i complie the file ConfigEditor.tsx in latest version
yarn watch
yarn run v1.12.3

Error
Type ‘(options: DataSourceSettings<MyDataSourceOptions, {}>) => void’ is not assignable to type ‘(config: DataSourceSettings<DataSourceJsonData, {}>) => void’.
Types of parameters ‘options’ and ‘config’ are incompatible.
Type ‘DataSourceSettings<DataSourceJsonData, {}>’ is not assignable to type ‘DataSourceSettings<MyDataSourceOptions, {}>’.

import React, { ChangeEvent, PureComponent } from 'react';

import { LegacyForms, DataSourceHttpSettings } from ‘@grafana/ui’;
import { DataSourcePluginOptionsEditorProps } from ‘@grafana/data’;
import { MyDataSourceOptions, MySecureJsonData } from ‘./types’;

const { SecretFormField, FormField } = LegacyForms;

interface Props extends DataSourcePluginOptionsEditorProps { }

interface State { }

export class ConfigEditor extends PureComponent<Props, State> {
onPathChange = (event: ChangeEvent) => {
const { onOptionsChange, options } = this.props;
const jsonData = {
…options.jsonData,
path: event.target.value,
};
onOptionsChange({ …options, jsonData });
};

// Secure field (only sent to the backend)
onAPIKeyChange = (event: ChangeEvent) => {
const { onOptionsChange, options } = this.props;
onOptionsChange({
…options,
secureJsonData: {
apiKey: event.target.value,
},
});
};

onResetAPIKey = () => {
const { onOptionsChange, options } = this.props;
onOptionsChange({
…options,
secureJsonFields: {
…options.secureJsonFields,
apiKey: false,
},
secureJsonData: {
…options.secureJsonData,
apiKey: ‘’,
},
});
};

dataSourceChange = () => {
const { onOptionsChange, options } = this.props;
onOptionsChange({ …options })
}
render() {
const { options, onOptionsChange } = this.props;
const { jsonData, secureJsonFields } = options;
const secureJsonData = (options.secureJsonData || {}) as MySecureJsonData;

return (
  <div className="gf-form-group">
    <div className="gf-form">
      <FormField
        label="Path"
        labelWidth={6}
        inputWidth={20}
        onChange={this.onPathChange}
        value={jsonData.path || ''}
        placeholder="json field returned to frontend"
      />
    </div>

    <div className="gf-form-inline">
      <div className="gf-form">
        <SecretFormField
          isConfigured={(secureJsonFields && secureJsonFields.apiKey) as boolean}
          value={secureJsonData.apiKey || ''}
          label="API Key"
          placeholder="secure json field (backend only)"
          labelWidth={6}
          inputWidth={20}
          onReset={this.onResetAPIKey}
          onChange={this.onAPIKeyChange}
        />
      </div>
    </div>
    <div className="gf-form">
      <DataSourceHttpSettings
        defaultUrl="http://localhost:9090"
        dataSourceConfig={options}
        showAccessOptions={true}
        sigV4AuthToggleEnabled={true}
        onChange={onOptionsChange}
      />
    </div>sasasa
  </div>
);

}
}

Please help me what i have missed.