observer mobx-react seems not working in React - reactjs

Question

I am a starter to React and mobx. Based on my design, data should be updated after click the button using observer, observable modules. Even though the console log displays the email changed whenever clicking the button, the view doesn't change at all. Could you give me any advice?
import Link from 'next/link';
import React, { useState } from 'react';
import ProfileImage from '../components/ProfileImage';
import faker from 'faker';
import { decorate, observable } from 'mobx';
import { observer } from "mobx-react"
class Data {
avartar = faker.image.avatar();
email = faker.internet.email();
name = {
firstName: faker.name.firstName(),
lastName: faker.name.lastName(),
};
}
decorate(Data, {
avartar: observable,
email: observable,
name: observable,
})
class Index extends React.Component {
data = new Data();
generate = () => {
this.data.email = faker.internet.email();
this.data.name.firstName = faker.name.firstName();
this.data.avartar = faker.image.avatar();
console.log("check: ", this.data.email);
}
render() {
return (
<>
<h1>Index</h1>
<button className="btn btn-primary" onClick={this.generate}>Change</button>
<div>
<dl className="row">
<dt className="col-sm-3">Avatar</dt>
<dd className="col-sm-9"><img src={this.data.avartar} /></dd>
<dt className="col-sm-3">Name</dt>
<dd className="col-sm-9">{this.data.name.firstName} {this.data.name.lastName}</dd>
<dt className="col-sm-3">Email</dt>
<dd className="col-sm-9">{this.data.email}</dd>
</dl>
</div>
</>);
}
}
Index = observer(Index);
export default Index;

Answer 1

You need to also decorate the Index.data property with #observable.
#observer
class Index extends React.Component {
#observable data = new Data();
}
// Or non-decorator syntax:
Index = observer(decorate(Index, { data: observable }));