this is an object which keys i want to be used as items of an array
export const backgrounds = {
none: {
component: () => null,
},
bamboo: {
component: () => Bamboo,
},
} as const satisfies Record<string, { component: () => ReactNode }>
like so
const arr: MagicType = ['none', 'bamboo']
array includes the exact number of keys and they cannot repeat and be missing, meaning the array will scream red when a new property was added to backgrounds signaling that it needs to be filled