How to use Custom Components as Props in rescript

@tsnobip @mouton thanks for replying
I tried doing what @mouton suggest,
my current code -

module Carousel = {
  @module("react-multi-carousel") @react.component
  external make: (
    ~children: React.element,
    ~responsive: responsive,
    ~deviceType: string=?,
    ~ssr: bool=?,
    ~slidesToSlide: int=?,
    ~draggable: bool=?,
    ~arrows: bool=?,
    ~renderArrowsWhenDisabled: bool=?,
    ~swipeable: bool=?,
    ~removeArrowOnDeviceType: array<string>=?,
    ~customLeftArrow: React.element=?,
    ~customRightArrow: React.element=?,
    ~customDot: dotProps => React.element=?,
}


module CustomDots = {
  type props = ReactMultiCarousel.dotProps
  let make = (props: props) => {
    Js.log(props)
    <div className="flex rounded-full bg-[#E5E7EB] w-[3px] h-[3px]" />
  }
}

<ReactMultiCarousel
      customDot=CustomDots.make
      afterChange=onAfterChange>
      qrTickets
    </ReactMultiCarousel>

but it is giving error

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at createFiberFromTypeAndProps (react-dom.development.js:28435:17)
    at createFiberFromElement (react-dom.development.js:28461:15)
    at createChild (react-dom.development.js:15110:28)
    at reconcileChildrenArray (react-dom.development.js:15405:25)
    at reconcileChildFibers (react-dom.development.js:15822:16)
    at reconcileChildren (react-dom.development.js:19163:28)
    at updateHostComponent (react-dom.development.js:19920:3)
    at beginWork (react-dom.development.js:21614:14)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4165:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4214:16)

for more context I’m giving my use case, so basically I’m using react-multi-carousel library and it has a prop customDom which takes jsx, in js it is implemented like this https://codesandbox.io/p/sandbox/react-multi-carousel-customdot-forked-ngppsl?file=%2Fsrc%2FApp.js%3A22%2C26-22%2C56

I’m not sure what we can use here, i tried React.cloneElement it also didn’t worked