Can't access variable defined in a react component

Question

I am making a weather app, my code looks something like this:

const Home = () => {
  const [weather, setWeather] = useState(null);
  useEffect(() => {
    // ...
    setWeather(weatherIGotFromAPI)
  })
  
  if (weather.current.dt < weather.current.sunrise - 1800 || weather.current.dt > weather.current.sunset + 1800) {
        const timeOfDay = "night"
    } else if (weather.current.dt > weather.current.sunrise + 1800 || weather.current.dt < weather.current.sunset + 1800) {
        const timeOfDay = "day"
    } else {
        const timeOfDay = "dawnOrDusk"
    }

  
  return (
    <p>{timeOfDay}</p>
  )
}

When I start the code, it says 'timeOfDay is not declared'. I can fix the issue by creating the timeOfDay variable outside of the if statement and then modifying it. I also know I can create a separate state for timeOfDay. But my question is why I have to do this? Is there something fundamental here I don't understand?