React+Typescriptの型定義エラーを解消したい

前提・実現したいこと

React + TypescriptでWebアプリの開発をしています。
画面単位でコンポーネントを組み立てており、onchange時にフォームの値を更新し表示させるよう実装したいのですが、this.state内の出力時に下記エラーが発生し、原因の解明に苦戦しています。

this.state.isImportPhaseは処理できているのですが、 this.state.info と this.state.message の出力時に
unefined判定されています。

原因がどこなのか、解決策など教えていただければと思います。
よろしくお願いいたします。

発生している問題・エラーメッセージ

TypeScript error in /Users/ikomasatoru/Desktop/workspace/git/offerbox-v2-front-company/src/fuelpages/ccontract/change/Change.tsx(366,115):
Object is possibly 'undefined'.  TS2532

    364 |                                   {/* <DatepickerComponent /> */}
    365 |                                   {/* <input class="text schedule-formctl hasDatepicker" name="APPLY_DATE" value="" type="text" id="form_APPLY_DATE" /> */}
  > 366 |                                   <input className="text schedule-formctl hasDatepicker" name="apply_date" value={this.state.info.apply_date !== undefined ? this.state.info.apply_date : ''} type="text" id="form_APPLY_DATE" onChange={this.handleChange} />
        |                                                                                                                   ^
    367 |                                   {/*<input className="text schedule-formctl hasDatepicker" name="apply_date" value="" type="text" id="form_APPLY_DATE" onChange={this.handleChange} />*/}
    368 |                                   <p>{this.state.message.apply_date}</p>
    369 |                                 </div>

該当のソースコード

interface定義

typesctipt
1interface DispProps {
2  isImportPhase?: boolean,
3  // InputElement?: HTMLInputElement,
4  // form項目のnameをリストアップ
5  info?: {
6    email?: any,
7    content?: any,
8    apply_date?: any,
9  },
10  message?: {
11    email?: any,
12    content?: any,
13    apply_date?: any,
14  },
15}
16
17interface DispStates {
18  isImportPhase?: boolean,
19  // InputElement?: HTMLInputElement,
20  // form項目のnameをリストアップ
21  info?: {
22    email?: any,
23    content?: any,
24    apply_date?: any,
25  },
26  message?: {
27    email?: any,
28    content?: any,
29    apply_date?: any,
30  },
31}

state, function定義：抜粋

typesctipt
1export class CcontractChange extends React.Component<DispProps, DispStates> {
2  constructor(props: any) {
3    super(props);
4
5    this.state = {
6      isImportPhase: true,
7      // InputElement: document.getElementById("form_APPLY_DATE"),
8      info: {
9        email: '',
10        content: '',
11        apply_date: '',
12      },
13      message: {
14        email: '',
15        content: '',
16        apply_date: '',
17      },
18    };
19
20    this.changeImportPhase = this.changeImportPhase.bind(this);
21    this.handleChange = this.handleChange.bind(this);
22    this.validator = this.validator.bind(this);
23    this.emailValidation = this.emailValidation.bind(this);
24    this.contentValidation = this.contentValidation.bind(this);
25  }
26
27  changeImportPhase() {
28    this.setState({
29      isImportPhase: !isImportPhase,
30    });
31  }
32
33  handleChange(event: any) {
34    const { name } = event.target;
35    const { value } = event.target;
36    const { info, message } = this.state;
37
38    this.setState({
39      info: { ...info, [name]: value },
40    });
41    this.setState({
42      message: { ...message, [name]: this.validator(name, value) },
43    });
44  }
45
46  validator(name: any, value: any) {
47    switch (name) {
48      case 'email':
49        return this.emailValidation(value);
50      case 'content':
51        return this.contentValidation(value);
52      case 'apply_date':
53        return this.contentValidation(value);
54    }
55  }
56
57  emailValidation(value: any) {
58    if (!value) return '※メールアドレスを入力してください';
59    const regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
60    if (!regex.test(value)) return '※正しい形式でメールアドレスを入力してください';
61    return '';
62  }
63
64  contentValidation(value: any) {
65    // if (!value) return '※内容を入力してください';
66    if (!value) alert('※内容を入力してください');
67    if (value.length < 8) return '※内容は8文字以上で入力してください';
68    return '';
69  }

記述部分

typesctipt
1<div className="control-group ">
2<div className="controls">
3<input className="text schedule-formctl hasDatepicker" name="apply_date" value=value={this.state.info.apply_date !== undefined ? this.state.info.apply_date : ''} type="text" id="form_APPLY_DATE" onChange={this.handleChange} />
4<p>{this.state.message.apply_date}</p>
5</div>
6</div>