Multiple jss in components when using react-planet which override other components' styles

I added the <Planet/> (from react-planet) to my App and the placement of some <Grid/> (from the Material UI) components changed.

While looking inside "Elements" in DevTool I noticed that divs inside the <Planet/> component have two classes jss3 and jss{i} where i is the next integral number. Each has different properties inside which overwrites every component in App that is using one of the jss{i} classes.

I also noticed that at first render i iteration, which applies to jss{i} used in newly created divs, starts from 1 and ends at 9 - because I have 6 planets so 1 for the main div, 2 for the central planet, 3 for divs' first class, and 4-9 for the six divs' second class. After the second render number goes from 10 to 18.

Screenshots of Elements at first render and second.

The class ={jss3 jss4} example

The class ={jss3 jss5} example

I assume that after creating planets by <Planet/>, whose children have two classes, the newly created class jss{i}, based on makeStyles-root-{i}, is overwriting properties of jss{i}, which is used somewhere else on page by <Grid/> components thus changing placement for the whole page.

Code where <Planet/> component is used:

return (
    <Grid
      item
      container
      justifyContent = "center"
      style = {{ margin: 30 }}
    >
      <Planet
        centerContent={
          <Fab size="small" color="primary" aria-label="add" onClick={handleOpen}>
            <AddIcon />
          </Fab>
        }
        open={isOpen}
        autoClose
        orbitRadius= {50}
        rotation = {90}
        hideOrbit
        friction = {20}
      >
        <div/>
        <div/>
        <div/>
        <Fab size="small" color="primary" aria-label="addBarIcon" onClick={handleChartAddLineChart}>
          <ShowChartIcon />
        </Fab>
        <Fab size="small" color="primary" aria-label="addBarIcon" onClick={handleChartAddBarChart}>
          <BarChartIcon />
        </Fab>
        <Fab size="small" color="primary" aria-label="addBarIcon" onClick={handleChartAddPieChart}>
          <PieChartIcon />
        </Fab>
      </Planet>
    </Grid>
  );

I tried putting only <div/> components inside <Planet/> but nothing changed. Changing from <Grid/> to normal <div/>, also didn't change anything. Also, I tried to find a similar problem on StackOverflow or somewhere else but I am not sure how to describe the problem using proper keywords.

I am not sure if it is some bug in the react-planet library that makes react-planet and material-ui impossible to use together or if there is a problem inside my code.

I am not sure what was exactly the cause of the "multiply class in one component" bug, but I copied Planet.tsx and Orbit.tsx from the react-planet repository and changed some code, got rid of makeStyles and problem solved. It was probably of nested makeStyles in all of those components in react-planet which conflicted with each other at different component rendering levels causing it to render multiple times in one object.

Additionally, it was overriding Material UI components styles due to simplified class naming from MUI makeStyle to css class while building production (makeStyles-root-{i} -> jss{i}, makeStyles -> jss).

Overriding styles were probably caused by the react-planets dependency of the old/different MUI version than I have for the rest of the code which created two styles generators for each of those versions as mentioned in MUI FAQ. The first generator created class from makeStyle for all of my page naming every class jss{i++} for i starting at i=1 and ending when all classes were renamed, then the react-planet generator created styles for its objects naming every class jss{i++} starting from i=1 leading to overriding every previous class=jss{i} with new properties.