On clicking Select component in Formik-Material-UI, app bar color is changing

Question

I am making a web project using React, Material, Formik, formik-material-ui.

I have included a select component as follow

import { Formik, Form, Field } from "formik";
import { TextField } from "formik-material-ui";
import MenuItem from "@mui/material/MenuItem";

<Field
    component={TextField}
    type="text"
    select={true}
    align="left"
    fullWidth
    size="small"
    margin="dense"
    variant="outlined"
    name="student"
    >
    <MenuItem value={10}>X</MenuItem>
    <MenuItem value={15}>Y</MenuItem>
    <MenuItem value={20}>Z</MenuItem>
</Field>

But on selecting an input from the select dropdown, my Material-UI Appbar color is changing. I have attached the before and after screenshots below.

Before:

After:

How to stop this from happening ?

Answer 1

This issue resolved when I migrated formik-material-ui code locally to [email protected] using the migration-guide and imported the lib locally directly in my project.

Apparently using Material UI v4 and v5 together was the issue.