idを元に都道府県名をfilter関数を使って表示させたい

(src/hooks/usePostPrefecturteSelect.tsx)

import { supabase } from 'src/libs/supabase';

export const getPrefectures = async () => {
  const { data, error } = await supabase.from('prefectures').select('id, prefectures_name');
  if (error) {
    alert(error);
  }
  return data;
};

(src/pages/admins/spots/post/index.tsx)

 const fetchPrefecturesListName = useCallback(async () => {
    const data: string[] | null = await getPrefectures();
    setPrefecturesName(data || []);
    // console.log(data);
  }, [setPrefecturesName]);

  useEffect(() => {
    fetchPrefecturesListName();
  }, [user, fetchPrefecturesListName]);

  useEffect(() => {
    setSession(supabase.auth.session());

    supabase.auth.onAuthStateChange((_event: string, session: Session | null) => {
      setSession(session);
    });
  }, []);

  const handleSpotPost = useCallback(async () => {

    const { data, error } = await supabase.from('spots').insert({
      name: name,
      title: title,
      admin_id: user?.id,
      appeal: appeal,
      area: area,
      link: link,
      target_person: targetPerson,
      usage_fee: usageFee,
      term: term,
      postal_code: postal_code,
      address: address,
      manager: manager,
      tel: tel,
      email: email,
      prefecture_id: prefecture_id,
    });
    console.log({ data, error });

    toast.success('スポットを登録しました', {});

    // 都道府県名の絞り込み
    const prefecturesFilter = prefectures_name.filter((prefectures) => {
      return prefectures.id === prefecture_id;
    });
  }, [
    name,
    title,
    appeal,
    area,
    link,
    targetPerson,
    usageFee,
    term,
    postal_code,
    address,
    manager,
    tel,
    email,
    prefecture_id,
  ]);

(src/pages/admins/spots/post/index.tsx)

  <div className='mb-5'>
    <label htmlFor='prefectures_name'>都道府県名</label>　　　　　　

    {prefectures_name.length == 0 ? null : (
      <select
        value={prefectures_name}
        onChange={(e) => {
          setPrefectureId(e.target.value);
          console.log(e.target.value);
        }}
        className='w-full p-2 rounded-l-md placeholder-gray-500'
      >
        {prefectures_name.map((value) => (
          <option key={value} value={value['id']}>
              // ログで都道府県IDが取得できているのは確認済み
             {console.log(value['id'])}

　　　　　　　　　　　　　　　　　　　　　　　　　　  // ログで都道府県名が取得できているのは確認済み
            {value['prefectures_name']}
             {console.log(value['prefectures_name'])} 
          </option>
        ))}
      </select>
    )}
  </div>
  {/* {console.log(prefectures_name)}