How to make two different Select components with different themes?

Question

React

Hello.
React project. For some features I use material ui. And so: declared to a component with Select. I created my own theme, described the styles, everything is ok.
Here is the component.

import React, {Component} from "react";
import {createMuiTheme, createStyles, MuiThemeProvider} from "@material-ui/core/styles";
import {_} from "underscore";
import MenuItem from "@material-ui/core/MenuItem";
import styled from "styled-components";
import Select from '@material-ui/core/Select';

const selectDays = createMuiTheme({
    overrides: {
        MuiInput: createStyles({
            underline: {
                '&&:after': {
                    display: "none"
                },
                '&&:before': {
                    display: "none"
                }
            }
        }),
        MuiSelect: createStyles({
            select: {
                borderRadius: '66px',
                padding: '3px 40px 3px 35px',
                height: '34px !important',
                fontSize: '16px',
                color: '#000',

                '&&:focus': {
                    backgroundColor: '#E0D5D2',
                    borderRadius: '66px'
                },
            },
            icon: {
                color: '#fff',
                right: '20px',
                fontSize: '30px',
                top: 'calc(50% - 15px)'
            },
        }),
        MuiInputBase: createStyles({
            inputSelect: {
                backgroundColor: '#E0D5D2',
                color: '#fff',
                minWidth: '200px !important',
                maxWidth: '300px',
                height: '44px !important',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontFamily: '"Lato", sans-serif',
                fontStyle: 'normal',
                fontWeight: 'normal',
                fontSize: '20px',
                lineHeight: '24px',
            }
        }),
        MuiMenuItem: createStyles({
            root: {
                background: '#E0D5D2',
                color: '#000',
                paddingBottom: '12px',
                paddingTop: '12px',
                paddingLeft: '10px',
                paddingRight: '10px',
                transition: '.2s linear',

                '&&:hover': {
                    backgroundColor: '#fff',
                },

                '&&:hover .okay-order-menu': {
                    borderColor: '#000',
                },

                '&&: selected': {
                    backgroundColor: '#26A152',
                    color: 'red',
                },
            },
            gutters: {
                paddingLeft: '45px'
            }
        }),
        MuiPaper: createStyles({
            rounded: {
                borderRadius: '22px'
            }
        }),
        MuiPopover: createStyles({
            paper: {
                left: "431.5px",
                width: "319px",
            }
        }),
        MuiList: createStyles({
            padding: {
                paddingTop: '0',
                paddingBottom: '0'
            }
        }),
        MuiListItem: createStyles({
            root: {
                '&$selected': {
                    backgroundColor: '#fff !important'
                }
            }
        }),

        // How do I enforce this ONLY inside of MuiMenuItem and only for
        // the selected variant of that?
        MuiTypography: {
            subheading: {
                color: 'white'
            }
        }
    }
});

class SelectDays extends Component{

    render(){
        const {
            activeDay,
            days,
        } = this.props;

        return(
            <DaySelect id="daySelect">
                <MuiThemeProvider theme={selectDays}>
                    <Select
                        value={activeDay}
                        onChange={this.props.changeDaySelect}
                        autoWidth={true}
                    >
                        {
                            _.map(days, (day, key) => {
                                return <MenuItem value={day[0]} key={key}>
                                            <OkayOrderMainDay className="okay-order-menu">
                                                <FontAweOkay className="fas fa-check" />
                                            </OkayOrderMainDay>
                                            {day[1]}
                                        </MenuItem >
                            })
                        }
                    </Select>
                </MuiThemeProvider>
            </DaySelect>
        )
    }
}

export default SelectDays;

But now I need to use approximately the same Select in another place, only with slightly different styles. I also declare the component, describe the theme with other styles, but as it turned out, these two themes of the two Selects are trying to reassign each other.
Tell me how to make two independent components with their own themes?
A variant with the declaration of one topic and the forwarding of any data into it that will identify this or that Select does not offer . I'll reserve)