Styled-Components Not Loading Until Page Refreshed - reactjs

Question

I'm facing an issue where the css from my styled-components aren't loading until we refresh. I pared down a specific file until there is just a button. I kept the file flow, but stripped out practically everything but the button and the green background color.
I would expect that on the first load, the button has a green background. Instead, it has a transparent background. But it does have the green background after refresh.
If additional context helps, we are using material themes at the moment but are transitioning to styled components. This specific page doesn't reference the MUI themes in any way I can tell. That said, I also am getting the multiple #mui/styles warning in the console. (My package.json doesn't directly use #mui/styles, so I am assuming it's a dependency)
I'm currently stumped and would happily take any suggestions on what to check.
It looks like there are several instances of `#material-ui/styles` initialized in this application.
This may cause theme propagation issues, broken class names, specificity issues, and makes your application bigger without a good reason.
See https://material-ui.com/r/styles-instance-warning for more info.
index.tsx
import PrimaryButton from "components/Shared/Button/PrimaryButton";
export default function ReviewPurchaseOrderPage() {
return (
<PrimaryButton
text={"Approve"}
onClick={() => console.log("test for SO question")}
/>
);
}
PrimaryButton.tsx
import ActionButton from "components/Shared/Button/ActionButton";
interface Props {
text: string;
onClick: () => void;
}
export default function PrimaryButton({
text,
onClick,
}: Props) {
return (
<ActionButton
text={text}
onClick={onClick}
/>
);
}
ActionButton.tsx
import { Button } from "#material-ui/core";
import styled from "styled-components";
const StyledActionButton = styled(Button)`
background-color: #769362;
`;
interface Props {
text: string;
onClick: () => void;
}
export default function ActionButton({
text,
onClick,
}: Props) {
return (
<StyledActionButton
onClick={onClick}
>
{text}
</StyledActionButton>
);
}