Moduleエラーがなくならない！

Module not found: Can't resolve '../components/SideList/SideList' in '/Users/user/udemy/youtube/src/pages'

とのエラーが無くならず、困っております

pathの確認や、
フォルダの名前を小文字にしてみたり、したのですが、
どこが違うのかわかりません。

VSコードにも問題点は表示されていません。

pages/Watch/Watch.js


import React from 'react'
import Layout from '../components/Layout/Layout'
import VideoDetail from '../components/VideoDetail/VideoDetail'
import SideList from '../components/SideList/SideList'

const Watch = () => {
  return (
    <Layout>
      <VideoDetail />
      <SideList />
    </Layout>
  )
}

export default Watch

components/SideList/SideList.js


import React,{useEffect,useContext} from './node_modules/react'
import {Store} from '../../store/index'
import {fetchRelatedData} from '../../apis/index'
import SideListItem from './SideListItem/SideListItem'
import Style from './SideList.module.scss'

const SideList = () => {
  const {globalState,setGlobalState} = useContext(Store)
  const setRelatedVideo  =async (id) =>{
    await fetchRelatedData(id).then((res)=> {
      setGlobalState({type: 'SET_RELATED', payload: {related: res.data.items}})
    })
  } 
  useEffect(() =>{
    setRelatedVideo(globalState.selected.id)

  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [globalState.selected])
  return (
    <div className={Style.sidenav}>
      {
      globalState.related ? globalState.related.map((video) => {
        return (
          <SideListItem 
          id ={video.id.videoId}
          key ={video.id.videoId}
          src={video.snippet.thumbnails.medium.url}
          title= {video.snippet.title}
          />
        )
      }) : <span> no data</span>
      }
    </div>
  )
}


export default SideList