I want to set different video as a background depends on weather condition for example while sunny condition then background video should be sunny cloudy weather should be cloud video. How can I do this in reactjs. All the video i have in assets folder of the project.

App js Code :

import Clear from "./Weatherconditions/Clear";
import Sunny from "./Weatherconditions/Sunny";
import Cloudy from "./Weatherconditions/Cloudy";
import Snow from "./Weatherconditions/Snow";
import Rainy from "./Weatherconditions/Rainy";

return (
    <div className="app"
    style={
      placeInfo.condition?.toLowerCase() === "clear" ? {Clear}:
      placeInfo.condition?.toLowerCase() === "sunny"? {Sunny}: 
      placeInfo.condition?.includes("cloudy")? {Cloudy }: 
      placeInfo.condition?.toLowerCase().includes("rainy")? {Rainy}: 
      placeInfo.condition?.toLowerCase().includes("snow")? {Snow}: {}}>

and one of the import section code :

for Clear:

import React from 'react';
import Videos from "../assets/clear.mp4";
const Clear = () => {
  return (
    <div>
        <video autoPlay loop muted style={{
            position: 'absolute',
            width: '100%',
            left: '50%',
            top: '50%',
            height: '100%',
            objectFit: 'cover',
            transform: 'translate(-50%, -50%)',
            zIndex: '-1'
        }}>
         <source src = {Videos} type="video/mp4"/> 
      </video>
    </div>
  )
}
export default Clear;

Please Help me