Codepen.io won't render React component - reactjs

Question

I've been driving myself insane trying to figure out why this React component won't render. After checking in a local environment it works fine, but I need this to work on CodePen.io to turn it in for a FreeCodeCamp Challenge. Any help would be greatly appreciated.
I've tried putting in an 'unpkg' source, adding it to the html in script tags (the React packages) and using the integrated npm tool in the codepen.io js tab in the settings. None of this worked and I think the code should work.
import React from 'http://esm.sh/react#18.2.0'
import ReactDOM from 'http://esm.sh/react-dom#18.2.0'
import * as redux from "http://cdn.skypack.dev/redux#4.2.0";
import reduxThunk from "http://cdn.skypack.dev/redux-thunk#2.4.2";
import { Provider, connect } from "http://cdn.skypack.dev/react-redux#8.0.5";
// Initial State
const initialState = {
quote: "Let's go",
author: "Bob J. Baker",
backgroundColor: "#f5f5f5"
};
// Actions: Types
const CHANGE_ALL = "CHANGE_ALL";
// Action: Functions
const changeAll = () => {
return async (dispatch) => {
try {
dispatch({ type: CHANGE_ALL });
const response = await fetch("https://quotes.rest/quote/random");
const data = await response.json();
const color = getRandomColor();
dispatch({
type: CHANGE_ALL,
quote: data.contents.quotes[0].quote,
author: data.contents.quotes[0].author,
backgroundColor: color
});
} catch (error) {
console.log(error);
}
};
};
const getRandomColor = () => {
const randomColor = "#" + Math.random().toString(16).substr(-6);
return randomColor;
};
// Reducer
const rootReducer = (state = initialState, action) => {
switch (action.type) {
case CHANGE_ALL:
return {
...state,
quoteAndAuthor: { quote: action.quote, author: action.author },
backgroundColor: action.backgroundColor
};
default:
return state;
}
};
// Store
const store = redux.createStore(rootReducer, redux.applyMiddleware(reduxThunk));
//**********Component://**********
class RandomQuoteComponent extends React.Component {
// state & props
constructor(props) {
super(props);
}
componentDidMount() {
// running the get all action
this.props.changeAll();
}
render() {
return (
<div
id="main-wrapper"
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100%",
width: "100%",
backgroundColor: this.props.backgroundColor
}}
>
<div id="quote-box">
<h2 id="text">{this.props.quote}</h2>
<h6 id="author">{this.props.author}</h6>
<button id="new-quote">New Quote</button>
<a href="#" id="tweet-quote">
<i className="fab fa-twitter"></i>
</a>
</div>
</div>
);
}
}
////**********END OF COMPONENT//**********
// Mapping for state and dispatch actions to props
const mapStateToProps = (state) => {
return {
backgroundColor: state.backgroundColor,
quote: state.quoteAndAuthor.quote,
author: state.quoteAndAuthor.author
};
};
const mapDispatchToProps = (dispatch) => {
return {
changeAll: () => dispatch(changeAll())
};
};
const ConnectedRandomQuoteComponent = connect(
mapStateToProps,
mapDispatchToProps
)(RandomQuoteComponent);
ReactDOM.render(
<Provider store={store}>
<ConnectedRandomQuoteComponent />
</Provider>,
document.getElementById("root")
);