Установка начального состояния в нулевое и передача файлового объекта в режим предварительного просмотра

Я создаю режим предварительного просмотра для просмотра определенного изображения по щелчку. Мой мыслительный процесс заключается в том, чтобы установить для свойства состояния значение null, щелкнув изображение, я затем устанавливаю состояние для определенного файла и отображаю путь к изображению в качестве источника изображения. Однако Typescript это не нравится, и он указывает Object is possibly null.

• Я попытался добавить selectedFile: Asset в свои расширенные реквизиты, но мне выдается ошибка в родительском компоненте, ожидающем, что он передаст файл. Я не хочу, чтобы он так себя вел.
• Я пытался написать это как selectedFile: Asset<{}>(), но Typescript жалуется, что я использую его как тип, а не как значение.

import * as React from "react"
import { Company } from "data/companies"
import { Asset } from "data/companies"
import Modal from "components/Modal"

interface MediaLibraryProps {
  company: Company
}

class MediaLibrary extends React.Component<MediaLibraryProps> {
  state = {
    mediaLibrary: [],
    editModalIsOpen: false,
    selectedFile: null
  }

  toggleEditModal = () => {
    this.setState({ editModalIsOpen: !this.state.editModalIsOpen })
  }

  openEditModal = (file: Asset) => {
    this.setState({
      editModalIsOpen: true,
      selectedFile: file
    })
  }

  getMediaLibrary = async () => {
    await fetch(
      `${process.env.REACT_APP_SA_API_URL}/${this.props.company.id}/images`,
      {
        headers: {
          Authorization: `Bearer ${localStorage.getItem("token")}`,
        },
      }
    ).then(blob => blob.json())
      .then(function (data: any) {
        return data.map((file: Asset) => Object.assign(file, {
          assetId: file.assetId,
          path: file.path
        }))
      }).then((data) => this.setState({ mediaLibrary: [...data] }))
  }

  render() {
    const files = this.state.mediaLibrary.map((file: Asset) => (
      <div key = {file.assetId} onClick = {() => this.openEditModal(file)}>
        <div>
          <img src = {`${process.env.REACT_APP_SA_CDN_URL}${file.path}`} />
        </div>
      </div>
    ))

    return (
      <div>
        <div>
          <h2>Media Library</h2>
        </div>
        {files}
        <hr />
        <Modal isOpen = {this.state.editModalIsOpen} toggleOpenness= 
          {this.toggleEditModal}>
          <img
            src = {this.state.selectedFile.path}
            onClick = {this.toggleEditModal}
          />
        </Modal>
      </div>
    )
  }
}

export default MediaLibrary

• Я ожидаю, что файл будет передан в состояние и ему будет предоставлен доступ к его свойствам, которые будут использоваться в моем модальном окне.
• Фактическое поведение заключается в том, что TypeScript не любит, когда состояние инициализируется как нулевое.