Console Errors Potentially due to styled-components 6 and temporary fix to hide errors

[CoderTom314]

Describe the bug (required)
When running filerobot-image-editor in nextjs with react there are console errors

intercept-console-error.js:51 Received `false` for a non-boolean attribute `active`.

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

If you used to conditionally omit it with active={condition && value}, pass active={condition ? value : undefined} instead.
error @ intercept-console-error.js:51
validateProperty @ react-dom-client.development.js:2954
warnUnknownProperties @ react-dom-client.development.js:3022
validatePropertiesInDevelopment @ react-dom-client.development.js:16849
setInitialProperties @ react-dom-client.development.js:17473
completeWork @ react-dom-client.development.js:13791
runWithFiberInDEV @ react-dom-client.development.js:544
completeUnitOfWork @ react-dom-client.development.js:15200
performUnitOfWork @ react-dom-client.development.js:15081
workLoopConcurrent @ react-dom-client.development.js:15058
renderRootConcurrent @ react-dom-client.development.js:15033
performWorkOnRoot @ react-dom-client.development.js:14350
performWorkOnRootViaSchedulerTask @ react-dom-client.development.js:15955
performWorkUntilDeadline @ scheduler.development.js:44Understand this errorAI
intercept-console-error.js:51 React does not recognize the `noMargin` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `nomargin` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
error @ intercept-console-error.js:51
validateProperty @ react-dom-client.development.js:2877
warnUnknownProperties @ react-dom-client.development.js:3022
validatePropertiesInDevelopment @ react-dom-client.development.js:16849
setInitialProperties @ react-dom-client.development.js:17473
completeWork @ react-dom-client.development.js:13791
runWithFiberInDEV @ react-dom-client.development.js:544
completeUnitOfWork @ react-dom-client.development.js:15200
performUnitOfWork @ react-dom-client.development.js:15081
workLoopConcurrent @ react-dom-client.development.js:15058
renderRootConcurrent @ react-dom-client.development.js:15033
performWorkOnRoot @ react-dom-client.development.js:14350
performWorkOnRootViaSchedulerTask @ react-dom-client.development.js:15955
performWorkUntilDeadline @ scheduler.development.js:44Understand this errorAI
intercept-console-error.js:51 React does not recognize the `showBackButton` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `showbackbutton` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
error @ intercept-console-error.js:51
validateProperty @ react-dom-client.development.js:2877
warnUnknownProperties @ react-dom-client.development.js:3022
validatePropertiesInDevelopment @ react-dom-client.development.js:16849
setInitialProperties @ react-dom-client.development.js:17473
completeWork @ react-dom-client.development.js:13791
runWithFiberInDEV @ react-dom-client.development.js:544
completeUnitOfWork @ react-dom-client.development.js:15200
performUnitOfWork @ react-dom-client.development.js:15081
workLoopConcurrent @ react-dom-client.development.js:15058
renderRootConcurrent @ react-dom-client.development.js:15033
performWorkOnRoot @ react-dom-client.development.js:14350
performWorkOnRootViaSchedulerTask @ react-dom-client.development.js:15955
performWorkUntilDeadline @ scheduler.development.js:44Understand this errorAI
intercept-console-error.js:51 React does not recognize the `isPhoneScreen` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isphonescreen` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
error @ intercept-console-error.js:51
validateProperty @ react-dom-client.development.js:2877
warnUnknownProperties @ react-dom-client.development.js:3022
validatePropertiesInDevelopment @ react-dom-client.development.js:16849
setInitialProperties @ react-dom-client.development.js:17473
completeWork @ react-dom-client.development.js:13791
runWithFiberInDEV @ react-dom-client.development.js:544
completeUnitOfWork @ react-dom-client.development.js:15200
performUnitOfWork @ react-dom-client.development.js:15081
workLoopConcurrent @ react-dom-client.development.js:15058
renderRootConcurrent @ react-dom-client.development.js:15033
performWorkOnRoot @ react-dom-client.development.js:14350
performWorkOnRootViaSchedulerTask @ react-dom-client.development.js:15955
performWorkUntilDeadline @ scheduler.development.js:44Understand this errorAI
intercept-console-error.js:51 React does not recognize the `showTabsDrawer` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `showtabsdrawer` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
error @ intercept-console-error.js:51
validateProperty @ react-dom-client.development.js:2877
warnUnknownProperties @ react-dom-client.development.js:3022
validatePropertiesInDevelopment @ react-dom-client.development.js:16849
setInitialProperties @ react-dom-client.development.js:17473
completeWork @ react-dom-client.development.js:13791
runWithFiberInDEV @ react-dom-client.development.js:544
completeUnitOfWork @ react-dom-client.development.js:15200
performUnitOfWork @ react-dom-client.development.js:15081
workLoopConcurrent @ react-dom-client.development.js:15058
renderRootConcurrent @ react-dom-client.development.js:15033
performWorkOnRoot @ react-dom-client.development.js:14350
performWorkOnRootViaSchedulerTask @ react-dom-client.development.js:15955
performWorkUntilDeadline @ scheduler.development.js:44Understand this errorAI
intercept-console-error.js:51 React does not recognize the `hasChildren` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `haschildren` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
error @ intercept-console-error.js:51
validateProperty @ react-dom-client.development.js:2877
warnUnknownProperties @ react-dom-client.development.js:3022
validatePropertiesInDevelopment @ react-dom-client.development.js:16849
setInitialProperties @ react-dom-client.development.js:17473
completeWork @ react-dom-client.development.js:13791
runWithFiberInDEV @ react-dom-client.development.js:544
completeUnitOfWork @ react-dom-client.development.js:15200
performUnitOfWork @ react-dom-client.development.js:15081
workLoopSync @ react-dom-client.development.js:14888
renderRootSync @ react-dom-client.development.js:14868
performWorkOnRoot @ react-dom-client.development.js:14351
performWorkOnRootViaSchedulerTask @ react-dom-client.development.js:15955
performWorkUntilDeadline @ scheduler.development.js:44Understand this errorAI
intercept-console-error.js:51 React does not recognize the `isAccordion` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isaccordion` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

To Reproduce (required)
Simply use styled components version 5 then errors disappear. Errors appear using version 6

Expected behavior
I believe this is related to https://github.com/styled-components/styled-components/issues/4049
styled-components/styled-components#4049
[Fato07
on Jul 27, 2023
](styled-components/styled-components#4049 (comment))

If you are sure that all of your styled-components are using transient props and you're still getting the warning, then the issue might be with a third-party library or component that is not using transient props. If that's the case, you may want to consider using with a prop filtering function, as suggested in the warning message.
Here's how you can set that up:

import { StyleSheetManager } from 'styled-components';
import isValidProp from '@emotion/is-prop-valid';

<StyleSheetManager shouldForwardProp={propName => isValidProp(propName)}>
    <YourComponent />
</StyleSheetManager>

Although this is a temporary fix, code still should be updated to meet the changes in styled components 6

Desktop (please complete the following information):

• OS: Windows 10
• Browser chrome
• Version unknown

[AhmeeedMostafa]

@CoderTom314 I think we might consider that on updating the 3rd parties used in our lib.