Get a type as enum values of object and pass the readonly object as props - React Typescript

I have the following data:

const ActionData = [  { label: 'Edit', icon: 'pen', key: 'edit' },  { label: 'Skip', icon: 'forward', key: 'skip' },  { label: 'Stop', icon: 'stop-circle', key: 'stop' },];

which I use to display list of Actions

{ActionData.map((dataItem) => (<ActionItem           key={dataItem.key}          item={dataItem}           onPress={handleActionClick}         />))}

I need a type ActionItemKeyType which should be 'edit' | 'skip' | 'stop'. i.e. keys of ActionData

If I declare ActionData as const

const ActionData = [  { label: 'Edit', icon: 'pen', key: 'edit' },  { label: 'Skip', icon: 'forward', key: 'skip' },  { label: 'Stop', icon: 'stop-circle', key: 'stop' },] as const;

then I am able to get the type ActionItemKeyType as expected using the following code

type ActionItemKeyType = typeof ActionData[number]['key'];

But if I declare ActionData in this way, then I can't pass the item props in my render method because the Array is read-only.

How can I achieve both the functionalities?