안녕하세요 리액트 질문 드립니다.

예를들어 data.js는
let data1 = [
    {id:0,name:"now사료",price:24000},
    {id:1,name:"오리젠 사료",price:24000},
    {id:2,name:"지위픽 사료",price:24000}
]
let data2 = [
    {id:0,name:"간식1",price:24000},
    {id:1,name:"간식2",price:24000},
    {id:2,name:"간식3",price:24000},
    {id:3,name:"간식4",price:24000}      
]
이렇게 생긴 데이터 입니다.

import { data1, data2 } from "./data.js";
이렇게 data.js를 임폴트했을때 맵을써서 스테이트를 변경할수는 없나요?
예를들면

let [dogFood, setDogFood] = useState(data1);
이걸 setDogFood를 이용해서 data2로 변경하고싶은데
data3,data4,data5이런식으로 계속 제가 data 변수를 추가해서 늘어난다고 가정했을때
            {itemBox.map((a, i) => {
              return (
                <Route
                  path={"/food" + (i + 1)}
                  element={
                    <Card i={i} setDogFood={setDogFood} dogFood={dogFood} />
                  }
                />
              );
            })}
이렇게 card라는 컴포넌트안에
import { data1, data2,data3,data4,data5 } from "./data.js";
다시 데이터를 임폴트 시키고

function Card(){
let copy = [...dogFood];
-----------------------------------
바깥의  {itemBox.map((a, i) 여기서 i를 props로 받아와서
copy = data+{props.i+1};
-----------------------------------
setDogFood(copy);
}
이런식으로 data1 data2 이렇게 data는 내버려두고 숫자만 바꿀수는 없나요?