데이터 바인딩 오류

App.js 파일

/*eslint-disable*/
import logo from './logo.svg';
import { useState } from 'react';
import './App.css';
import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import data from './data.js';

function App() {

  let [shoes] = useState(data)

  return (
    <div className="App">
      <Navbar expand="lg" className="bg-body-tertiary">
        <Container>
          <Navbar.Brand href="#home">ShoeShop</Navbar.Brand>
            <Nav className="me-auto">
              <Nav.Link href="#home">Home</Nav.Link>
              <Nav.Link href="#link">Cart</Nav.Link>
            </Nav>
        </Container>
      </Navbar>
    
      <div className="main-bg"></div>
      <div className="container">
        <div className="row">
          <div className="col-md-4">
            < img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%"></img>
            <h4>{shoes}</h4>
            <p>상품설명</p>
          </div>
          <div className="col-md-4">
            < img src="https://codingapple1.github.io/shop/shoes2.jpg" width="80%"></img>
            <h4>상품명</h4>
            <p>상품설명</p>
          </div>  
          <div className="col-md-4">
            < img src="https://codingapple1.github.io/shop/shoes3.jpg" width="80%"></img>
            <h4>상품명</h4>
            <p>상품설명</p>
          </div>          
        </div>
      </div>
    </div>
  );
}

export default App;

data.js 파일

let data = [
    {
      id : 0,
      title : "White and Black",
      content : "Born in France",
      price : 120000
    },
  
    {
      id : 1,
      title : "Red Knit",
      content : "Born in Seoul",
      price : 110000
    },
  
    {
      id : 2,
      title : "Grey Yordan",
      content : "Born in the States",
      price : 130000
    }
  ]

export default data;
두 파일 입력하고나서
<h4>{shoes}</h4> shoes를 전달하는 순간 
Uncaught Error: Objects are not valid as a React child (found: object with keys {id, title, content, price}). If you meant to render a collection of children, use an array instead
에러가 계속 발생하는데 이유를 모르겠습니다. 강의 코드랑 다른점이없는데..