I am currently getting a error while loading a page, i removed this part of the html and the error disappeared:

error:

Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <div> in <p>.

code:

  <Accordion>
                    <AccordionSummary
                        expandIcon={<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512">
                            <path
                                d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/>
                        </svg>}
                        aria-controls="panel1a-content"
                        id="panel1a-header"
                    >
                        <Typography>
                            <div className={"mb-0 font-extrabold"}>Leveling Up</div>
                            <div>Whenever the user gains a level, Moody can send a personalized message.</div>
                        </Typography>

                    </AccordionSummary>
                    <AccordionDetails>
                        <hr className={"mb-6"}/>

                        <Container>

                            <form>

                                <FormControlLabel control={<Switch
                                    id="enabled"
                                    checked={formik.values.enabled}
                                    onChange={(e) => {
                                        formik.handleChange(e);
                                        handleFormChange(formik, guild);
                                    }}
                                    onBlur={formik.handleBlur}
                                />} label={"Enabled"}/>
                            </form>
                        </Container>
                    </AccordionDetails>
                </Accordion>