TypeScript - Suggestions don't show up for objects with an index signature containing a mapped object (union type)

I'm new to typescript so it could be me but PHPStorm is not giving suggestions or autcomplete for an object with an index signature containing a mapped object (union type). This is within a .vue file (vue 3.2) using the composition API and script setup syntax sugar

I'm using PHPstorm 2021.2.2 and Typescript 4.4.3. I'm posting this under webstorm as its more js/typescript related

.vue file (please notice the "<{ [key in FlashType]: Flash }>") when declaring the flashObjs const

<script setup lang="ts">
import { BellIcon, CakeIcon, ExclamationCircleIcon } from '@heroicons/vue/solid'
import { reactive } from 'vue'
import Flash from "../Types/Flash";
import FlashType from "../Types/FlashType";

const flashObjs = reactive<{ [key in FlashType]: Flash }>({
    message: {
        icon: CakeIcon,
        background: 'bg-blue-500',
        display: true
    },
    success: {
        icon: BellIcon,
        background: 'bg-green-500',
        display: true
    },
    error: {
        icon: ExclamationCircleIcon,
        background: 'bg-red-500',
        display: true
    }
})
</script>

Flash.ts

import { RenderFunction } from "vue";

interface Flash {
    icon: RenderFunction,
    background: string,
    display: boolean,
}

export default Flash

FlashType.ts

type FlashType = 'message' | 'success'| 'error';

export default FlashType

Please see the following pics that shows phpstorm not autocompleting any props when then trying to loop through flashObjs var in my vue template. If I do manually type in the prop, phpstorm shows it as an unresolved variable

If I then make a small change to NOT use a mapped index signature and instead use <{ [key: string]: Flash }>, PHPStorm then suggests the correct props of my Flash object.

.vue file with NOT using union index signature

const flashObjs = reactive<{ [key: string]: Flash }>({
    message: {
        icon: CakeIcon,
        background: 'bg-blue-500',
        display: true
    },
    success: {
        icon: BellIcon,
        background: 'bg-green-500',
        display: true
    },
    error: {
        icon: ExclamationCircleIcon,
        background: 'bg-red-500',
        display: true
    }
})

Please see the following image that shows that now looping through the flashObjs var, PHPstorm then suggestions the correct props

Am I doing anything wrong, or is this expected behavior? Not sure if this is a bug or not but would appreciate any advice.

Thanks!