I have a deeply nested state of the following type Series:

      {
        id: 0,
        metaData: {},
        multipleGroupsRequireApproval: false,
        approvalStatus: ApprovalStatus.NO_APPROVAL,
        variants: Variant[] | null,
        items: Item[] | null,
      }[],

Upon the first render of Component I get data from backend in the same format and set it to the state. That’s why there are bunch of nulls in the interface.

I have a method to approved state of a series:

setApprovalForCurrentSeries(seriesIndex, variantIndex) {
        set(
          produce((state: SeriesStore) => {
            const series = state.seriesArray[seriesIndex]
            if (series?.variants) {
              series.approvalStatus = ApprovalStatus.HAS_APPROVAL

              const variant = series.variants[variantIndex]

              if (variant) {
                variant.isApproved = true
              }
            }

            const items = series?.items|| []
            items.forEach((item) => {
              const itemVariants = item.variants || []
              const itemVariant = itemVariants[variantIndex]
              if (itemVariant) {
                itemVariant.isApproved = true
              }
            })
          }),
        )
      },

There will be several more methods and all of them change variants or items. Is there a way to pull out part where I do those if-statements to check whether an object exists? So that I could access desired objects directly.