I am using "styled" from material ui to stylize my components. Now, im cleaning code from console errors.

At first, i was having such thing: "Warning: React does not recognize the constantColors prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase constantcolors instead. If you accidentally passed it from a parent component, remove it from the DOM element".

As for example, the issue was in passing all props to the DOM children element (knowned issue?) So, this code:

export const StyledAddCircleOutlined = styled(AddCircleOutline)(
  ({ theme, constantColors = false }) => css`
    color: ${constantColors ? theme.palette.success.main : 'none'};
    transition: all 1s ease;
    cursor: pointer;
    :hover {
      color: ${constantColors ? 'none' : theme.palette.success.main};
      opacity: ${constantColors ? 0.6 : 'none'};
    }
    :active {
      color: ${theme.palette.success.light};
      transition: all 5ms ease;
    }
  `
)

was refactored by me to such thing:

export const StyledAddCircleOutlined = styled(
  ({ theme, constantColors = false, ...rest }) => <AddCircleOutline {...rest} />
)(
  ({ theme, constantColors = false }) => css`
    color: ${constantColors ? theme.palette.success.main : 'none'};
    transition: all 1s ease;
    cursor: pointer; 

(...)

And in most cases this works on other components... but not this time. This time, i have just a new error instead :)

"Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Check the render method of Styled(Component)"

Whats going on ? Usually such refactor works, its not even a complex function, its just an Icon from material-ui library :P

How to fix that ? I am not giving anywhere refs and i dont known if I should ?

In DOM structure it looks like that:

          {index === 0 && !isMobileDevice && (
            <StyledAddCircleOutlined
              onClick={() => handleAddField(name, field.value)}
              constantColors
            />
          )}