チェックボックスをクリックすると、Resas apiから都道府県別人口の値を取得して再度、クリックすると値を削除できるようにしたい！！

Question

現在、チェックボックスをクリックしたらResas apiから都道府県別人口推移を取ってきてhighchartsライブラリーを用いてグラフを表示するというSPAを作成しているのですが、うまくできなくて困ってます????

現在の進捗はチェックボックスをクリックしたらapiから都道府県別の人口推移を取得しconsoleに出力、再度、クリックしたら空の配列に戻す(今後、グラフに表示するという機能を実装した時にグラフから消えるようにするため)という機能を実装中です。

以下の写真が完成イメージ、コードが現在の状況です。

![]

import React from 'react';
// import { CheckField } from './components/CheckField';
// import Highcharts from 'highcharts';
// import HighchartsReact from 'highcharts-react-official';
import './App.css';
import { Main } from './components/Main';

function App() {
  return (
    <div className="App">
      <h2>Title</h2>
      <Main></Main>
    </div>
  );
}

export default App;

import React from 'react';

export const CheckField = (props) => {
  // console.log(props.prefectures);
  return (
    <>
      {props.prefectures.map((prefecture) => (
        <li key={prefecture.prefName}>
          <input
            onChange={(event) =>
              props.onChange(prefecture.prefName, prefecture.prefCode, event.target.checked)
            }
            type="checkbox"
            name="pref_name"
            id={'checkbox' + prefecture.prefCode}
          />
          <label htmlFor={'checkbox' + prefecture.prefCode}>{prefecture.prefName}</label>
        </li>
      ))}
      ;
    </>
  );
};

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

import axios from 'axios';

export const Main = () => {
  const [prefectures, setPrefectures] = useState(null);
  useEffect(() => {
    axios
      .get('https://opendata.resas-portal.go.jp/api/v1/prefectures', {
        headers: { 'X-API-KEY': process.env.REACT_APP_API_KEY },
      })
      .then((results) => {
        setPrefectures(results.data);
      });
  }, []);

  const [prefPopulation, setPrefPopulation] = useState([]);
  const onCheckField = (prefName, prefCode, check) => {
    console.log(check);
    // チェックをつけた処理
    if (check) {
      axios
        .get(
          'https://opendata.resas-portal.go.jp/api/v1/population/composition/perYear?prefCode=' +
            String(prefCode),
          {
            headers: { 'X-API-KEY': process.env.REACT_APP_API_KEY },
          },
        )
        .then((results) => {
          setPrefPopulation(results.data.result.data[0].data);
          console.log(prefPopulation);
        });
    }
    // チェックを外した処理
    else {
      setPrefPopulation([]);
    }
  };

  return (
    <main>
      <h2>都道府県</h2>
      {prefectures && <CheckField prefectures={prefectures.result} onChange={onCheckField} />}
      <h2>人口推移グラフ</h2>
    </main>
  );
};

現在のコードで動きを確認したのですが、よくわからない挙動になっています????????????
どなたか私のコードを修正していただけませんか？？

typescriptではなく、素のreactです。

当方、初めてSPAを作成中でなにが原因でおかしくなっているのかあまり理解できていない状況です。
よろしければコードと共に原因と解説をつけていただけますと幸いです。

どうかよろしくお願いします????‍♂️