Type error in Webcam {() => JSX.Element}

[amitesh-zeni]

Please follow the general troubleshooting steps first:

• Is your app running over HTTPS? (please provide the URL if possible)
• Have you tried running the demo (https://codepen.io/mozmorris/pen/JLZdoP) on your device?
• Checked the latest "Can I use" compatbility table? (https://caniuse.com/stream)

Bug reports:

CodeSandbox: https://codesandbox.io/p/sandbox/v2gpf8
Type Error:

Type '() => JSX.Element' is not assignable to type '((string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null) & ((childrenProps: ChildrenProps) => Element)) | undefined'.
  Type '() => JSX.Element' is not assignable to type 'string & ((childrenProps: ChildrenProps) => Element)'.
    Type '() => JSX.Element' is not assignable to type 'string'.

What can be the best way to remove this error?
Just passing the Element doesn't help. I am using React 18.3.1 and seems like the error is because in React 18, the children prop now needs to be listed explicitly when defining props; or something on those lines.
Please help!

[sami-azzam]

Try capturing with ref instead: Guide.

Here is my code in TypeScript:

import Webcam from 'react-webcam'
import { useCallback, useRef } from 'react'

const videoConstraints = {
    width: 400,
    height: 400
}

export default function AvatarInput() {
  const webcamRef = useRef<Webcam>(null)

  // Call this function to take a screenshot
  const capture = useCallback(() => {
    const imageSrc = webcamRef.current?.getScreenshot()
    return imageSrc
  }, [webcamRef])

  return (
      <Webcam
        ref={webcamRef}
        height={400}
        width={400}
        screenshotFormat="image/jpeg"
        videoConstraints={videoConstraints}
        mirrored
      />
  )
}

---

Edit: I see you were already using a ref, so there is no need to add children in the Webcam component. Just use the ref to capture just like the guide and my sample code.