reactjs - 状態を設定するときに文字列にメソッドを適用する方法、反応フック

Question

設定中に文字列を分割しようとしています。React はエラー "TypeError:メソッドを適用しようとすると (string.split("_") など)、未定義です。

しかし、メソッドを適用しようとしなければ、文字列は正しく表示されます。くわは、状態を設定する前にメソッドを適用できますか?

  const [data, setData] = useState([]);
  const [photoArray, setPhotoArray] = useState([]);
  const [photoNum, setPhotoNum] = useState(0);
  const [photoName, setPhotoName] = useState("");

  useEffect( () => {
    const fetchData = async () => {
      const result = await axios(
        {
            url: 'http://localhost:1000',
            method: 'GET',
            },
        );
      const result2 = await axios(
        {
            url: 'https://someurl.com',
            method: 'GET'
        },
      )
        setData(result2.data.items)

      }
    fetchData();
  }, []);

  useEffect( () => {
    setPhotoArray(data.map( photo => photo.name))
  },[data])

  useEffect( () => {
    //This doesn't work
    setPhotoName(photoArray[0].split('_').join(' ')
    //This works:
    // setPhotoName(photoArray[0])
  },[photoArray])

また、useEffect を適切に使用していますか? (3 回、1 つの setSate が別の setSate を適用するのを待つたびに)