Custom arrow causes a warning in the console

[HejKatya]

Describe the bug
Custom arrow causes a warning in the console: **Warning: Received false for a non-boolean attribute rtl. If you want to write it to the DOM, pass a string instead: rtl="false" or rtl={value.toString()}.

If you used to conditionally omit it with rtl={condition && value}, pass rtl={condition ? value : undefined} instead.**

To Reproduce
Create a custom arrow

Expected behaivor
No warnings

Screenshots
(screenshots of the warning, the arrow functions and the carousel itself)

[Govinda04]

Hi, Can you provide the '...restArrowProps'?

I suspect that '...restArrowProps' has some prop that gets the boolean value, but expects the other type of value instead of boolean

[Govinda04]

Actually reading the files i found that arrowProps which you populate are also have one extra prop 'rtl' which is boolean
It has Interface for prop like below

interface RightArrowProps {
  customRightArrow?: React.ReactElement<any> | null;
  getState: () => StateCallBack;
  next: () => void;
  disabled?: boolean;
  rtl?: boolean;
}

where it provides rtl

you can also skip rtl by doing
const { carouselState, children, rtl, ...restArrowProps } = arrowProps

[AshishRaj04]

`const customleftarrow = (

<ArrowBackIcon sx={{ color: "white" }} />

);

const customrightarrow = (

<ArrowForwardIcon sx={{ color: "white" }} />

);
const ArrowFix = (arrowProps) => { const {carouselState, children,rtl, ...restArrowProps} = arrowProps; return ( <span {...restArrowProps}> {children} ); };

return (

<Carousel

    customLeftArrow={<ArrowFix> {customleftarrow} </ArrowFix>}
    customRightArrow={<ArrowFix> {customrightarrow} </ArrowFix>}
    
  >
   // ITEMS TO BE PUT INSIDE 
  </Carousel>`