선생님! 개인 플젝 도움 요청드립니다!!

상위 페이지에서 검색 버튼 만들어 
axios get요청으로 서버에서 검색결과 데이터를 받아
state에 저장하고 하위 컴포넌트 search에 props를 전달해
search 페이지에 검색 결과를 뿌려주려고 합니다

console.log 찍어본 결과
버튼 클릭시 검색데이터는 잘 출력되는데
search 컴포넌트에서는 undefined가 출력됩니다

이렇게 저렇게 해봐도 하위 컴포넌트에서 props값을 못받아오는 것 같은데
검색버튼 클릭시 state에 저장하는 코드가 문제일까요..??

도움 요청 드립니다 ㅜㅠ

//// server.js
app.get('/search', (req, res) => {
let searchRule = [
 {
 $search: {
 index: 'artistSearch',
 text: {
 query: req.query.value,
 path: "artist"
 }
 }
 },
 { $sort : { _id : -1 }}
 ]
 console.log(req.query);
 db.collection('showlist').aggregate(searchRule).toArray((err, result) => {
 res.send(result)
 })
});


//// App.js

let [ search, setSearch ] = useState('');
let [ searchResult, setSearchResult ] = useState([]);

<Routes>
<Route path='/' element={
<>
<span className='main-sc-box'>
<span className='ip-wrap'>
<input type="text" id='search-box' onChange={(e) => {setSearch(e.target.value);}} />
<button id='search' onClick={() => {
 axios.get(`/search?value=${search}`).then((result) => {
 console.log(result.data);
setSearchResult(...result.data);
navigate(`/search?value=${search}`)
 }).catch(() => {
 console.log('실패')
 })}}>검색</button>
</span>
</span>
<div className='card'>
{
 [...readData].slice(0).reverse().map((show, i) => {
return (
<Card show={show} key={show._id} login={login} />
 )
 })
}
</div>
</>
} />

<Route path='/add' element={<Add />} />
<Route path='/fail' element={<Fail />} />
<Route path='/edit/:id' element={<Edit readData={readData} />} />
<Route path='/search' element={<Search login={login} />} searchResult={searchResult} />
</Routes>

//// Search.js

import React, { useEffect, useState } from 'react';
import Card from './Card.js';

function Search({ login, searchResult }) {
let [ searchData, setSearchData ] = useState([]);
useEffect(() => {
 console.log(login)
 console.log(searchData);
setSearchData(searchResult);
 
return () => {
 
 }
 }, [])
 

return (
<>
<div className="card">
 검색결과임
{/* {
 [...searchResult].slice(0).reverse().map((show, i) => {
 return (
 <Card show={show} key={show._id} login={login} />
 )
 })
 } */}
</div>
</>
 );
}

export default Search;