데이터 출력

  const datas = require("/public/data/data.json");
  const [data, setData] = useState(datas);

  function shuffle(array) {
    return array.sort(() => Math.random() - 0.5);
  }

  useEffect(() => {
    setData(shuffle(data));
  }, []);

  return (
    <div className="Section">
      {datas.map((item, i) => {
        return (

데이터를 가져와서 state에 넣고 페이지 로드시마다 셔플함수를 사용해서 섞어준 후 map()으로 출력하는데 계속 섞이기 전 순서대로만 출력됩니다.
코드 내에서 변경사항이 생겨서 저장 했을 때 가끔 랜덤으로 바뀌었다가도 페이지를 새로고침하면 또 순서대로 정렬되는데 대체 뭐가 문제인건가요ㅠ
순서나 함수 사용에 문제가 있는 건가요? 따로 디비는 사용하지 않고 json 파일 만들어서 출력하고 있습니다!!

컴포넌트 바깥으로 빼서 props로 받아 사용하는데 바뀌기 전 데이터를 보여준 후 섞인 데이터로 출력합니다..

useEffect()가 두 번 실행되는건가 해서 
const nextConfig = {
  reactStrictMode: false,
};
도 해봤는데 이게 아니네요

useState()에 false를 넣었다가 useEffect()가 실행될 때 함께 true로 바꿔서 true면 출력하게 할까 시도해봤는데 data.map()으로 출력하는 부분에서 에러가 나더라고요
성공하더라도 로딩에 시간이 걸릴 것 같은데 이 방법을 사용하는게 맞나요?