I am trying to conditionally change the background video src based on what my current state value is inside my functional component however it will not change the video. If my {weather.weather} state is 'clouds' I want the video src="./sand.mp4" else, I want src="./beach.mp4".

The videos are loading correctly with the conditional on the initial render but won't update according to state value. The state changes correctly on my button click and will console.log correctly to the value. I am not managing the video src with state and am just using the path to the file. I tried managing the video src with state and I was having the same issue where the video will not change. I'm thinking it may need a re-render but am unsure how to go about this.

**All other code and state change is handled through an input & submit button

<video autoPlay muted loop id="background-video">
  <source src={weather.weather === "clouds" ? "./sand.mp4" : "./beach.mp4" } type="video/mp4" />
</video>