空配列に正しく値が入力されない

Question

##実現したいこと・質問したいこと

selectedの[]に正しく値を入力したい.
二つ目のコードのpayloadの部分をselectedに追加させて、undefinedを解消させたい。。
どうすればエラーを解消し、追加することが出来るのかを教えていただきたいです。

##エラーメッセージ

Cannot read property 'title' of undefined

##試してみたこと

console.logによって原因を考えました。そうすると、global.selectedが空配列になっているため、titleがundefinedになるのだと思います。なぜ何も値が入っていないのかと思い、その原因をconsole.logで確認したところ、そもそもuseEffectが実行されていないのではないかと思いました。（useEffectの中のconsole.logが実行されていない）
useEffectはVideoDetailコンポーネントがマウントされるときに実行されると思ったのですが、実行されていないということはコンポーネントが配置されていないのでしょうか。
どうすれば解決できるかもご教授いただけると幸いです。

##ソースコード

import React, { useEffect, useContext } from 'react';
import { useLocation } from 'react-router-dom'
import { fetchSelectedData } from '../../apis/index'
import { Store } from '../../store/index'
import VideoPlay from '../VideoPlay/VideoPlay';
import Style from './VideoDetail.module.scss'
import Linkify from 'react-linkify'
//useEffect内ではasync 関数を利用することができないので別に関数を用意する

const VideoDetail = () => {
    const { globalState, setGlobalState } = useContext(Store)
    const location = useLocation()
    const setSelectedVideo = async () => {
        //location.search...URLの？以降が格納されている。これをURLSearchparamsに渡すことでオブジェクトに変更
        const searchParams = new URLSearchParams(location.search)
        const id = searchParams.get('v')
        console.log(searchParams)
        console.log('id', id)
        //idはv=という形でURLに含まれているためこれでパラメータを取得する
        //これが実行されてない可能性あり
        await fetchSelectedData(id).then((res) => {
            //このshift()メソッドは、 配列から最初の要素を削除し、その削除された要素を返します。このメソッドは、配列の長さを変更します。
            const item = res.data.items.shift()
            setGlobalState({ type: 'SET_SELECTED', payload: { selected: item } })
            console.log('res', res)
        })
    }
    //useEffectすら実行されてない
    useEffect(() => {
        setSelectedVideo()
        console.log(setSelectedVideo())
    }, [])
    console.log(globalState)
    console.log(globalState.selected)
    console.log(globalState.selected.id)
    console.log(globalState.selected.snippet)

    return globalState.selected ? (
        <div className={Style.wrap}>
            <VideoPlay id={globalState.selected.id} />
            <p>{globalState.selected.snippet.title}</p>
            <hr />
            <Linkify>
                <pre>{globalState.selected.snippet.description}</pre>
            </Linkify>
        </div>
    ) : (<span style={{ color: "white" }}>no data</span>)
}

export default VideoDetail

import React, { createContext, useReducer } from 'react';

const initialState = {
    popular: [],
    selected: []
}
//reducer関数は二つの値を取り、一つの値を返す関数のこと
const reducer = (state, action) => {
    //そもそもreducerを通しているのか疑惑
    console.log(action.payload)
    switch (action.type) {
        case 'SET_POPULAR':
            return { ...state, popular: action.payload.popular }
        case 'SET_SELECTED':
            //initialStateに複数に配列が含まれる場合、stateを展開していないとpopularのでーたが消えてしまうので
            return { ...state, selected: action.payload.selected }
        default:
            return state;
    }

}
//初期値
export const Store = createContext({
    globalState: initialState,
    setGlobalState: () => null
})

export const StoreProvider = ({ children }) => {
    const [globalState, setGlobalState] = useReducer(reducer, initialState)
    return (
        <Store.Provider value={{ globalState, setGlobalState }}>
            {children}
        </Store.Provider>
    )
}

##環境
windows10
react: 17.0.2