Как высести foreign key в React/TypeScript приложении из Djnago

Есть модель в django

class Address(models.Model):
city = models.ForeignKey(City, on_delete=models.CASCADE, related_name='addresses', verbose_name='Город')
area = models.ForeignKey(Area, on_delete=models.CASCADE, related_name='area', verbose_name='Район')
street = models.ForeignKey(Street, on_delete=models.CASCADE, related_name='street', verbose_name='Улица')
сonstruction = models.IntegerField(verbose_name="Номер дома")
liter = models.CharField(max_length=30, verbose_name="Литер", blank=True, null=True)
bilding = models.CharField(max_length=100, verbose_name='Здание', blank=True, null=True)

class Meta:
    verbose_name_plural = 'Адреса'
    verbose_name = 'Адрес'
    db_table = 'address'

def __str__(self):
    return f"Город: {self.city} Улица: {self.street} {str(self.сonstruction)}"

Есть serilaizer:

class AddressSerializer(serializers.HyperlinkedModelSerializer):
class Meta:
    model = Address
    fields = ['id','сonstruction', 'liter', 'bilding', 'street', 'area','city']

Есть React компонент:

 interface Address{
    id:number;
    bilding:string;
    сonstruction: number;
    city:City;
}
interface City{
    id:number;
    name: string;
}
const Address:React.FC =()=>{
    const [date,setDate] = useState<Address[]>([]);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get('http://127.0.0.1:8000/api/address/');
                setDate(response.data)
            }catch(error){console.error('Error fetching data:', error)}
        }
        fetchData()
    }, []);

    return (
        <div>
            {date.map(item=>(
                <div key={item.id} >
                    <p>{item.сonstruction}</p>
                    <p>{item.city.name}</p>
                </div>
            ))}
        </div>
    );
}
export default Address

Проблема в том, что не выводиться тут:

<div>
    {date.map(item=>(
    <div key={item.id} >
         <p>{item.сonstruction}</p>
         <p>{item.city.name}</p>
    </div>
            ))}
</div>

следующий код:

<p>{item.city.name}</p>

Что является foreign key. В google именно так описан вывод foreign key в React/TypeScript. Возможно я плохо искал. Подскажите пожалуйста, что я делаю не так?

city = CitySerializer()

class AddressSerializer(serializers.HyperlinkedModelSerializer):
city = CitySerializer()
class Meta:
    model = Address
    fields = ['id','сonstruction', 'liter', 'bilding', 'street', 'area','city']