state 변경해도 html 반응 없음

app.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;

이거 받아서 props로 HomeRoute에 넘겨주고, 
HomeRoute는 그 받은 데이터를 map만큼 돌리면서 ShoesCard에 넘겨줘서
div로 보여줍니다.

이런 구조에서,
app.js에서 data를 추가하면 HomeRoute는 재렌더링을 못하는건가
데이터 추가는 되는데 div ui가(신발 그림이나 가격같은거)가 안늘어납니다.
ShoesCard에서 추가하면 잘 늘어나는데, app.js에서 추가하면 안늘어납니다

문제점은 무엇이고 해결방법이 어떻게 될까요?
구조적인 문제일까요?

app.js

import './App.css';
import { Navbar, Container, Nav } from 'react-bootstrap';
import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom';
import HomeRoute from './routes/HomeRoute.js';
import DetailRoute from './routes/DetailRoute.js';
import data from './components/data.js';
import axios from 'axios';
import { useState } from 'react';

function App() {
  let navigate = useNavigate();
  let [dataSet, setDataSet] = useState(data);
  return (
    <div className="App">
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link
              onClick={() => {
                navigate('/');
              }}
            >
              Home
            </Nav.Link>
            <Nav.Link
              onClick={() => {
                navigate('/detail');
              }}
            >
              Features
            </Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

      <button>
        <Link to="/" className="Link">
          홈
        </Link>
      </button>
      <button>
        <Link to="detail" className="Link">
          상세페이지
        </Link>
      </button>

      <Routes>
        <Route path="/" element={<HomeRoute data={dataSet} />} />
        <Route path="/detail/:id" element={<DetailRoute data={dataSet} />} />
      </Routes>

      <button
        onClick={() => {
          axios
            .get('https://codingapple1.github.io/shop/data2.json')
            .then((result) => {
              console.log(result.data);
            })
            .catch((err) => {
              console.log(err);
            });
        }}
      >
        데이터요청
      </button>
      <button
        onClick={() => {
          console.log('1 shoes', dataSet);
          let copy = [...dataSet];
          console.log('2 copy', copy);
          copy.push({
            id: 6,
            title: '새로운신발',
            content: '새로운신발입니다',
            price: 100000,
          });
          console.log('3 copy', copy);
          setDataSet(copy);
          console.log('4 shoes', dataSet);
        }}
      >
        테스트입니다
      </button>
    </div>
  );
}
console.log('hi');
export default App;

HomeRoutes.js

import React, { useEffect } from 'react';
import { useState } from 'react';
import ShoesCard from '../components/ShoesCard.js';
import axios from 'axios';

const HomeRoute = (props) => {
  let [shoes, setShoes] = useState(props.data);
  let [alert, setAlert] = useState();
  let [inputData, setInputData] = useState('입력하세요');
  let [temp, setTemp] = useState();
  useEffect(() => {
    if (temp == undefined) {
      setAlert('입력하세요');
    } else {
      console.log(temp);
      isNaN(temp) ? setAlert('문자열이네요 감사합니다') : setAlert('이건 문자열이 아니잖아');
    }
  }, [temp]);

  return (
    <div className="container">
      <div style={{ width: '100%', backgroundColor: 'green', color: 'white' }}>{alert}</div>

      <input
        onChange={(e) => {
          setInputData(e.target.value);
        }}
      ></input>
      <button
        onClick={() => {
          let a = parseInt(inputData);
          setTemp(a);
        }}
      >
        전송
      </button>
      <div className="row">
        {shoes.map((a, i) => {
          return <ShoesCard data={shoes} count={i} key={i} />;
        })}
      </div>
      <button
        onClick={() => {
          let copy = [...shoes];
          let copy_result = copy.sort((a, b) => {
            return a.title > b.title ? 1 : -1;
          });
          setShoes(copy_result);
        }}
      >
        정렬
      </button>
    </div>
  );
};

export default HomeRoute;

ShoesCard.js

import { useState } from 'react';

function ShoesCard(props) {
  let [shoesUrl, setShoesUrl] = useState(`https://codingapple1.github.io/shop/shoes${props.count + 1}.jpg`);
  return (
    <div className="col-md-4">
      < img src={shoesUrl} width="80%" />
      <h4>{props.data[props.count].title}</h4>
      <p>{props.data[props.count].content}</p>
      <p>{props.data[props.count].price}원</p>
    </div>
  );
}

export default ShoesCard;

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;