React JS: trying to have sentimental anlysis prediction link to background - reactjs

Question

The goal of this current app is to have the "POSITIVE" mood prediction link to a sunny day background, and "NEGATIVE" mood prediction link to a moving cloudy day background. Below is the crux of my code. My question is more specifically about the logic. If somebody can explain how state would work in this situation would be the best. How to tie the "css based background in JS" element to the state and how to make a method to handle the changing background and how to return the method. Let me know if the question is unclear.
enter code here
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
theme: "",
};
}
handleBackground = () => {
if (!this.state.mood) {
return startBackground;
} else if (this.state.mood === "NEGATIVE") {
return cloudFromCss;
} else {
return sunFromCss;
}
};
render() {
const isLoading = this.state.isLoading;
const formData = this.state.formData;
const mood = this.state.mood;
const sunFromCss = {
".sun": {
position: "absolute",
margin: "auto",
borderRadius: "50%",
top: "0",
right: "0",
bottom: "80%",
left: "60%",
backgroundColor: "rgb(252, 174, 7)",
height: "50px",
width: "50px",
animationName: "beat",
animationDuration: "3s",
animationIterationCount: "infinite",
transform: "scale(2.5)",
opacity: "0.8",
},
"#keyframes backdiv": { "50%": { background: "#bde6f3" } },
"#keyframes beat": {
"0%": { transform: "scale(2.5) rotate(-45deg)" },
"50%": { transform: "scale(2) rotate(-45deg)" },
},
};
const startBackground = {
"#clouds": { padding: "100px 0", background: "#c9dbe9" },
};
const cloudFromCss = {
"#clouds": { padding: "100px 0", background: "#c9dbe9" },
".cloud": {
width: "200px",
height: "60px",
background: "#fff",
borderRadius: "200px",
animationName: "moveclouds",
animationIterationCount: "infinite",
position: "relative",
},
".cloud:before,\n.cloud:after": {
content: '""',
position: ["absolute", "absolute"],
background: "#fff",
width: "100px",
height: "80px",
top: "-15px",
left: "10px",
borderRadius: "100px",
transform: "rotate(30deg)",
},
".cloud:after": {
width: "120px",
height: "120px",
top: "-55px",
left: "auto",
right: "15px",
},
".x1": { opacity: "0.8", animationDuration: "15s" },
"#keyframes moveclouds": {
"0%": { marginLeft: "1000px" },
"100%": { marginLeft: "-1000px" },
},
};
return (
{() => this.handleBackground()}
)