tsx로 짜여진 코드에 데이터를 불러오니 데이터만 보입니다

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import '../styles/Kitchenware.css'; // CSS 파일 import
import Footer from '../components/Footer';
import Navbar from '../components/Navbar';
import bowlsImage from '../img/list/bowls3.jpg'; // bowlsImage import 추가

interface Bowlsdata {
  _id: string;
  img: string;
  title: string;
  price: string;
}

const Bowls: React.FC = () => {
  const [bowlsData, setBowlsData] = useState<Bowlsdata[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/Bowls');
        const data = await response.json();
        setBowlsData(data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <Navbar />

      <div className='list-img-box'>
        <div className='list-img'>
          < img src={bowlsImage} alt='bowlsImage' />
          <div className='list-img-text'>
            <div className='left-text-header'>
              <h1>Bowls</h1>
              <div className='left-text-description'>
                <p>Fill life to the brim.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="cup">
        {bowlsData.map((bowlsItem) => (
          <div key={bowlsItem._id} className="card">
            < img src={bowlsItem.img} alt={bowlsItem.title} />
            <h4>{bowlsItem.title}</h4>
            <p>{bowlsItem.price}</p>
            <Link to={`/BowlsDetail/${bowlsItem._id}`} className="custom-link">
              View Details
            </Link>
          </div>
        ))}
      </div>

      <Footer />
    </div>
  );
};

export default Bowls;

tsx로 미리 짜여진 코드
[
  {
    "_id": "6628b484d9205ce6dd8fa604",
    "img": "https://crowcanyon.co.kr/web/product/medium/202212/333caecd9c54d8b5f854d45a75243b90.jpg",
    "title": "크로우캐년홈 기프트박스",
    "price": "￦2000",
    "detail": "크로우캐년홈은 1977년 창업이래, 클래식한 디자인과 내구성 둘 다 갖춘 높은 퀄리티의 에나멜웨어를 만들어왔습니다. 미국 뿐 아니라 전세계적으로 유리나 플라스틱 등 깨지기 쉬운 소재가 환경에 안좋은 소재가 사용되는 것을 우려하여 지속 가능하며 청결하고 디자인까지 멋진 제품은 없을까 라는 아이디어에서 시작하여 만들어졌습니다. 머그의 용량은 340ml 이며, 색상은 민트 색상입니다.",
    "detailimg": {
      "0": "https://crowcanyon.co.kr/web/upload/NNEditor/20230105/D11_EBAFBCED8AB8_1.jpg",
      "1": "https://crowcanyon.co.kr/web/upload/NNEditor/20230105/copy-1672909324-1111.jpg",
      "2": "https://crowcanyon.co.kr/web/upload/NNEditor/20230105/copy-1672909346-D02_EC97B0ECB69CECBBB7.jpg"
    },
    "type": "Bowls"
  },
  {
    "_id": "6628b516d9205ce6dd8fa605",
    "img": "https://crowcanyon.co.kr/web/product/medium/202301/a59b19d743d00f443c18186d9685f789.jpg",
    "title": "C17 시리얼보울 민트 히비스커스",
    "price": "￦24000",
    "detail": "크로우캐년홈은 1977년 창업이래, 클래식한 디자인과 내구성 둘 다 갖춘 높은 퀄리티의 에나멜웨어를 만들어왔습니다. 미국 뿐 아니라 전세계적으로 유리나 플라스틱 등 깨지기 쉬운 소재가 환경에 안좋은 소재가 사용되는 것을 우려하여 지속 가능하며 청결하고 디자인까지 멋진 제품은 없을까 라는 아이디어에서 시작하여 만들어졌습니다. 머그의 용량은 340ml 이며, 색상은 민트 색상입니다.",
    "detailimg": {
      "0": "https://crowcanyon.co.kr/web/upload/NNEditor/20230105/D11_EBAFBCED8AB8_1.jpg",
      "1": "https://crowcanyon.co.kr/web/upload/NNEditor/20230105/copy-1672909324-1111.jpg",
      "2": "https://crowcanyon.co.kr/web/upload/NNEditor/20230105/copy-1672909346-D02_EC97B0ECB69CECBBB7.jpg"
    },
    "type": "Bowls"
  }
] Mongodb 데이터 저장후에

const express = require('express');
const path = require('path');
const cors = require('cors');
const { MongoClient } = require('mongodb');

const app = express();

app.use(express.json());
app.use(cors());
app.use(express.static(path.join(__dirname, 'crow/build')));

let db;

const url = 'mongodb+srv://@cluster0.sx8ohzg.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0';

MongoClient.connect(url)
  .then((client) => {
    console.log('DB 연결 성공');
    db = client.db('plateshop');
    app.listen(8080, () => {
      console.log('http://localhost:8080 에서 서버 실행중');
    });
  })
  .catch((err) => {
    console.log(err);
  });

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, '/crow/build/index.html'));
});

app.get('/Bowls', async (req, res) => {
  try {
    const bowlsData = await db.collection('BowlsData').find().toArray();
    res.json(bowlsData);
  } catch (err) {
    console.error(err);
    res.status(500).json({ success: false, message: '데이터베이스 조회 중 오류가 발생했습니다.' });
  }
});

app.get('/listss', (req, res) => {
  res.render('listss.ejs');
});

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '/crow/build/index.html'));
});

데이터를 불러오니 React가 안보이고 데이터만 보입니다,, 왜그런가요