Полученные объекты из django отображаются в виде чисел/идей

Я использую React frontend и Django backend. Мне удалось сделать так, что пользователи могут добавлять крыс в свой аккаунт, однако когда я хочу получить подробную информацию о крысах, информация отображается в виде чисел, я предполагаю, что это id детали?

Вот пример. Вот что получается, если просмотреть одну из крыс фронтально:

User: 12, Rat Name: newrat Rat Body colour: 3, Eye colour: 3

Как видите, вы получаете id (?) каждой детали, кроме имени крысы. Она принадлежит пользователю с id 12, и создан 3-й цвет тела, и т.д.

Вот мои модели:

class EyeColour(models.Model):
    name = models.CharField(max_length=255)
    
    def __str__(self):
        return self.name
    
class BodyColour(models.Model):
    name = models.CharField(max_length=255)
    
    def __str__(self):
        return self.name

class rat(models.Model):
    name = models.CharField(max_length=132, null =True)
    body_colour = models.ManyToManyField(BodyColour, related_name='bodycolour')
    eye_colour = models.ManyToManyField(EyeColour, related_name='eyecolour')
    user = models.ForeignKey(User, on_delete=models.CASCADE, null = True)
    def __str__(self):
        return self.name

Сериализаторы:

class EyeColourSerializer(FlexFieldsModelSerializer):
    class Meta:
        model = EyeColour
        fields = '__all__' 
        
class BodyColourSerializer(FlexFieldsModelSerializer):
    class Meta:
        model = BodyColour
        fields = '__all__' 

class RatSerializer(FlexFieldsModelSerializer):
    class Meta:
        model = rat
        # fields = '__all__' 
        exclude = ['bio']
        # read_only_fields = ['eye_colour', 'body_cdolour']
        expandable_fields = {
            'EyeColour': ('accounts.EyeColourSerializer', {'many': False}),
            'Image': ('accounts.ImageSerializer', {'many': False}),
        }

и мнения:

class ratViewset(FlexFieldsMixin, ReadOnlyModelViewSet):

    serializer_class = RatSerializer
    queryset = rat.objects.all()

Наконец, это часть файла viewRats.jsx, к которому вы обращаетесь для просмотра каждой крысы:

class viewRat extends Component {
  constructor(props) {
    super(props);

    this.state = {
      id: this.props.match.params.id,
      rat: {},
    };
  }

  componentDidMount() {
    RatStuff.getRatById(this.state.id).then((res) => {
      this.setState({ rat: res.data });
    });
  }

....

<div className="row">
              <label> User: </label>
              <div> {this.state.rat.user}</div>
            </div>
            <div className="row">
              <label> Rat Name: </label>
              <div> {this.state.rat.name}</div>
            </div>
            <div className="row">
              <label> Rat Body colour: </label>
              <div> {this.state.rat.body_colour}</div>
            </div>
            <div className="row">
              <label> Eye colour: </label>
              <div> {this.state.rat.eye_colour}</div>
            </div>

Я совсем новичок в этом деле. Что я делаю, что заставляет его отображаться как числа/идентификатор каждой вещи?

class EyeColourSerializer(FlexFieldsModelSerializer):
    class Meta:
        model = EyeColour
        fields = '__all__' 
    
class BodyColourSerializer(FlexFieldsModelSerializer):
    class Meta:
        model = BodyColour
        fields = '__all__' 

class RatSerializer(FlexFieldsModelSerializer):
    user         = serializers.CharField(source='user.username')
    body_colour  = BodyColourSerializer(many=True)
    eye_colour   = EyeColourSerializer(many=True)
    class Meta:
        model = rat
        # fields = '__all__' 
        exclude = ['bio']
        # read_only_fields = ['eye_colour', 'body_cdolour']