I am using react to write a web UI, when I am using this code to invoke a function handleSearchInfo in render block:

render(){
const props = {
      beforeUpload: file => {
        console.log(file.type)
        const isXls = (file.type === 'application/vnd.ms-excel') || (file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
        if (!isXls) {
          message.error('only support Excel');
          return false;
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          message.error('less than 2MB!');
          return false;
        }
        return isXls ? true : Upload.LIST_IGNORE;
      },
      name: 'file',
      action: 'https://api.example.com/zhuolian/word/import',
      headers: {
        authorization: JSON.parse(localStorage.getItem('User')).token,
      },
      onChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          message.success(`${info.file.name} file uploaded successfully`);
          this.handleSearchInfo();
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} file upload failed.`);
        }
      },
    };
}

it tell me TypeError: Cannot read properties of undefined (reading 'handleSearchInfo'), when I use const that = this; then using that to invoke the function, it works. why should I need to using that to access the function? why could not using this + function directly?