[Divider][Tabs] Using divider with tab causes 4 console warnings in Chrome DevTools

[bpc1985]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to reproduce:
https://codesandbox.io/s/ecstatic-fast-rhkzvn?file=/Demo.tsx

Current behavior 😯

When trying to add Divider to Tab component

For example:

      <Tabs
        orientation="vertical"
        variant="scrollable"
        value={value}
        onChange={handleChange}
        aria-label="Vertical tabs example"
      >
        <Tab label="Item One" {...a11yProps(0)} />
        <Tab label="Item Two" {...a11yProps(1)} />
        <Divider />
        <Tab label="Item Three" {...a11yProps(2)} />
        <Tab label="Item Four" {...a11yProps(3)} />
        <Divider sx={{ borderBottomWidth: "thick" }} />
        <Tab label="Item Five" {...a11yProps(4)} />
        <Tab label="Item Six" {...a11yProps(5)} />
        <Tab label="Item Seven" {...a11yProps(6)} />
      </Tabs>

it causes a lot of warnings in devtools

Warning: React does not recognize the `fullWidth` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `fullwidth` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at hr
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Divider (https://rhkzvn.csb.app/node_modules/@mui/material/Divider/Divider.js:120:43)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Tabs (https://rhkzvn.csb.app/node_modules/@mui/material/Tabs/Tabs.js:194:43)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Box (https://rhkzvn.csb.app/node_modules/@mui/system/esm/createBox.js:28:40)
    at VerticalTabs (https://rhkzvn.csb.app/Demo.tsx:51:35)
    at StyledEngineProvider (https://rhkzvn.csb.app/node_modules/@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js:21:23)
    
Warning: Received `false` for a non-boolean attribute `indicator`.

If you want to write it to the DOM, pass a string instead: indicator="false" or indicator={value.toString()}.

If you used to conditionally omit it with indicator={condition && value}, pass indicator={condition ? value : undefined} instead.
    at hr
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Divider (https://rhkzvn.csb.app/node_modules/@mui/material/Divider/Divider.js:120:43)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Tabs (https://rhkzvn.csb.app/node_modules/@mui/material/Tabs/Tabs.js:194:43)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Box (https://rhkzvn.csb.app/node_modules/@mui/system/esm/createBox.js:28:40)
    at VerticalTabs (https://rhkzvn.csb.app/Demo.tsx:51:35)
    at StyledEngineProvider (https://rhkzvn.csb.app/node_modules/@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js:21:23)
    
Warning: React does not recognize the `selectionFollowsFocus` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `selectionfollowsfocus` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at hr
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Divider (https://rhkzvn.csb.app/node_modules/@mui/material/Divider/Divider.js:120:43)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Tabs (https://rhkzvn.csb.app/node_modules/@mui/material/Tabs/Tabs.js:194:43)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Box (https://rhkzvn.csb.app/node_modules/@mui/system/esm/createBox.js:28:40)
    at VerticalTabs (https://rhkzvn.csb.app/Demo.tsx:51:35)
    at StyledEngineProvider (https://rhkzvn.csb.app/node_modules/@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js:21:23)
    
Warning: React does not recognize the `textColor` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `textcolor` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at hr
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Divider (https://rhkzvn.csb.app/node_modules/@mui/material/Divider/Divider.js:120:43)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Tabs (https://rhkzvn.csb.app/node_modules/@mui/material/Tabs/Tabs.js:194:43)
    at div
    at eval (https://rhkzvn.csb.app/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:62:23)
    at Box (https://rhkzvn.csb.app/node_modules/@mui/system/esm/createBox.js:28:40)
    at VerticalTabs (https://rhkzvn.csb.app/Demo.tsx:51:35)
    at StyledEngineProvider (https://rhkzvn.csb.app/node_modules/@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js:21:23)
​

Expected behavior 🤔

It should not show any warnings

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[ZeeshanTamboli]

@bpc1985 What is your purpose for having a Divider element there? The Material UI Tabs component is meant to have only Material UI Tab children inside.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[bpc1985]

@bpc1985 What is your purpose for having a Divider element there? The Material UI Tabs component is meant to have only Material UI Tab children inside.

Sorry, I dont see it for a long time
Using <Divider /> in <Tabs> to add some line divider between some tab