Imagem dos pratos não aparecem na lista de restaurantes

em: http://localhost:3000/restaurantes

os pratos não estão exibindo na lista dos restaurantes

ListaRestaurante.tsx

import { useEffect, useState } from 'react';
import IRestaurante from '../../interfaces/IRestaurante';
import style from './ListaRestaurantes.module.scss';
import Restaurante from './Restaurante';
import axios from 'axios';
import { IPaginacao } from '../../interfaces/IPaginacao';

const ListaRestaurantes = () => {

  const [restaurantes, setRestaurantes] = useState<IRestaurante[]>([])
  const [proximaPagina, setProximaPagina] = useState('')
  const [busca, setBusca] = useState('')

  const verMais = () => {
    axios.get<IPaginacao<IRestaurante>>(proximaPagina)
      .then((resposta) => {
        setRestaurantes([...restaurantes, ...resposta.data.results])
        setProximaPagina(resposta.data.next)
      }).catch((erro) => {
        console.log(erro)
      });
  }

  useEffect(() => {
    axios.get<IPaginacao<IRestaurante>>('http://localhost:8000/api/v1/restaurantes/', {
      params: {
        search: busca
      }
    })
      .then((resposta) => {
        setRestaurantes(resposta.data.results)
        setProximaPagina(resposta.data.next)
      }).catch((erro) => {
        console.log(erro)
      });
  }, [busca])

  return (
    <section className={style.ListaRestaurantes}>
      <h1>Os restaurantes mais <em>bacanas</em>!</h1>
      <form>
        <label>Pesquisar Restaurantes</label>
        <input value={busca} onChange={evento => setBusca(evento.target.value)} type='search' />
      </form>
      {restaurantes?.map(item => <Restaurante restaurante={item} key={item.id} />)}
      {proximaPagina && <button onClick={verMais}>Ver mais</button>}
    </section>
  )
}

export default ListaRestaurantes

Restaurante.tsx

import IRestaurante from '../../../interfaces/IRestaurante';
import Prato from '../Prato';
import estilos from './Restaurante.module.scss';

interface RestauranteProps {
  restaurante: IRestaurante
}

const Restaurante = ({ restaurante }: RestauranteProps) => {

  return (<section className={estilos.Restaurante}>
    <div className={estilos.Titulo}>
      <h2>{restaurante.nome}</h2>
    </div>
    <div>
      {restaurante.pratos?.map(item => <Prato prato={item} key={item.id} />)}
    </div>
  </section>)
}

export default Restaurante

não consigo encontrar onde estou errando para não exibir os pratos. não aparece nenhum erro no console