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 = ( <div className="absolute arrow-btn left-0 text-center py-3 cursor-pointer bg-lightDark rounded-full"> <ArrowBackIcon sx={{ color: "white" }} /> );

const customrightarrow = ( <div className="absolute arrow-btn right-0 text-center py-3 cursor-pointer bg-lightDark rounded-full"> <ArrowForwardIcon sx={{ color: "white" }} /> ); const ArrowFix = (arrowProps) => { const {carouselState, children,rtl, ...restArrowProps} = arrowProps; return ( <span {...restArrowProps}> {children} ); };

return ( <div className="mb-8"> <Carousel

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