Toogle between upperCase and LowerCase Switch on a submitted form - reactjs

Question

I am making a website where customers can submit a form with their personal data, like address, phone and email. The form sends the submitted data to an "Answers page" where the company can copy the details into their internal system. The answers page is made as a form which is read only.
The data is sent through an strapi API, then fetched again to the answers page. Everything is working fine.
The problem is that I want a simple Toogle between uppercase and lowercase letters for the submitted answers on the answers page. For some reason I cant get it to work. I have tried with useState and LocalStorage. I can console that the actuall boolean changes between true/false, but the text dosent rerender to uppercase and lowercase. I am using a MUI switch to toogle between uppercase and lowercase.
//Settings Context
export const SettingsContext = createContext();
export const SettingsProvider = props => {
const [upperCase, setUpperCase] = useState(localStorage.getItem("upperCase"));
document.documentElement.setAttribute("upperCase", upperCase);
return (
<SettingsContext.Provider value={[ upperCase, setUpperCase ]}>
{ props.children }
</SettingsContext.Provider>
)
}
//AnswerPage
const [upperCase, setUpperCase] = useContext(SettingsContext);
return (
<>
{answers
.sort((b, a) => a.id - b.id)
.filter((item, idx) => idx < 1)
.map((item) => {
const { country, street, postal, city, phone, email, publishedAt } =
item.attributes;
const phoneFormated = phone ? phone.replace(/\s+/g, "") : "";
let countryFormated;
if(upperCase === true) {
countryFormated = country.toUpperCase();
} else {
countryFormated = country.toLowerCase();
}
<FormTextField
onClick={copyCountry}
InputProps={{
readOnly: true,
endAdornment: (
<InputAdornment position="end">
<IconButton
edge="end"
color="primary"
sx={{ boxShadow: "none" }}
onClick={copyCountry}
>
<ContentCopyIcon
sx={{ height: ".8em", width: ".8em" }}
/>
</IconButton>
</InputAdornment>
),
}}
variant="standard"
label="Country"
type="text"
defaultValue={country ? countryFormated : ""}
inputRef={countryRef}
/>
//switch
function AnswersSettingsModal({ open, handleClose }) {
const [upperCase, setUpperCase] = useContext(SettingsContext);
const handleChange = (event) => {
setUpperCase(event.target.checked);
localStorage.setItem("upperCase", event.target.checked);
document.documentElement.setAttribute("upperCase", event.target.checked);
};
return (
<ModalLayout open={open} handleClose={handleClose}>
<Typography id="transition-modal-title" variant="h6" component="h2">
Show big or small letters
</Typography>
<FormGroup>
<Stack direction="row" spacing={1} alignItems="center">
<FormControlLabel
sx={{ marginLeft: "0" }}
control={
<>
<Typography>Small letters</Typography>
<Switch
checked={upperCase}
onChange={handleChange}
name="upperCase"
/>
<Typography>Big letters</Typography>
</>
}
/>
</Stack>
</FormGroup>
<button className="btn-close" onClick={handleClose}>
Close
</button>
</ModalLayout>
);
}
export default AnswersSettingsModal;