Narrowing a Generic type, compiler is unhappy

Question

Given this somewhat tortured set-up:

enum Mammal {
    Monkey= 'monkey',
    Mouse = 'mouse',
    Cat = 'cat'
}
enum Reptile {
    Lizard='lizard',
    Snake='snake'
}

type ReptileFood = {
    [Reptile.Lizard]: {foodType:'bugs'}
    [Reptile.Snake]: {foodType:'mice'}
}
type MammalFood = {
    [Mammal.Monkey]: {foodType:'bananas'} 
    [Mammal.Mouse]:  {foodType:'cheese'}
    [Mammal.Cat]:  {foodType:'fish'}
}
type ValueOf<T> = T[keyof T];

type Animal = keyof MammalFood | keyof ReptileFood
type AnimalFood = ReptileFood & MammalFood

function feedAnimal(animal:Animal, food:ValueOf<AnimalFood>):void{
    console.log(`The ${animal} has eaten the ${food.foodType}`)
}

...I would like to create a special case of feedAnimal for mammals only:

function feedMammal<FoodType extends MammalFood>(animal:keyof MammalFood, food:ValueOf<FoodType>){
    feedAnimal(animal, food)
}

But the compiler isn't happy with the type of food in the call to feedAnimal:

 Argument of type 'ValueOf<FoodType>' is not assignable to parameter of type 'ValueOf<AnimalFood>'.
  Type 'FoodType[string] | FoodType[number] | FoodType[symbol]' is not assignable to type 'ValueOf<AnimalFood>'.
    Type 'FoodType[string]' is not assignable to type 'ValueOf<AnimalFood>'.
      Type 'FoodType[string]' is not assignable to type '{ foodType: "fish"; }'.
        Type 'ValueOf<FoodType>' is not assignable to type '{ foodType: "fish"; }'.
          Type 'FoodType[string] | FoodType[number] | FoodType[symbol]' is not assignable to type '{ foodType: "fish"; }'.
            Type 'FoodType[string]' is not assignable to type '{ foodType: "fish"; }'.

How can I make it understand that everything will be fine?

Playground here