I have the following TypeScript type:

type Colour = {
  colour: string;
  type: string;
};

And I have the below function:

const formattedKeys = (legend: { [name: string]: string }[]) => {

  return <>
         <Grid item xs={6}>{name}</Grid><Grid item xs={6}>{value}</Grid>
         </>
}

This function is being used by lots of others types, so I want the field's key to be dynamic. However, I'm struggling to get the function to accept the Colour type's values. Is there a way to do this?