React will pass an object down to MyComponent that looks like this:

{ person: { name: "ALEN", age: 40 } }

Because you specify the properties name and age in your object destructuring and not person, it will be undefined.

You can declare the function like this:

const MyComponent = ({ person: { name,age } }) => { 
    return (
      <div>
        <h1> HI THERE I M {name}</h1>
      </div>
    );
}

What eslint is telling you with the react/destructuring-assignments error is that assignments like:

const data = this.state.data;

can be rewritten into:

const { data } = this.state;

This also works for function arguments, so:

onChange = e => { ... }

can be written as

onChange = ({target: {value, name}}) => { ... }

The next error for react/no-access-state-in-setstate tells you that you are writing:

this.setState({
    data: { ...this.state.data, [e.target.name]: e.target.value }
});

when you should be writing:

this.setState(prevState => ({
    data: { ...prevState.data, [e.target.name]: e.target.value }
}));

or, if you combine it with the react/destructuring-assignments rule:

onChange = ({target: {name, value}}) =>
    this.setState(prevState => ({
        data: { ...prevState.data, [name]: value }
    }));

You can read more about those two rules here:

react/destructuring-assignment

react/no-access-state-in-setstate