title: React-Webcam : How can I solve "Object is possibly 'null'." and "Type 'null' is not assignable to type 'string | undefined'."?
body: <p>I am having issues with</p>
  <pre><code>const imageSrc = webcamRef.current.getScreenshot();
  </code></pre>
  <p>Error: Object is possibly 'null';</p>
  <p>and src={imgSrc}</p>
  <pre><code>&lt;img src={imgSrc} /&gt;
  </code></pre>
  <p>Error: Type 'null' is not assignable to type 'string | undefined'.ts(2322)
  index.d.ts(2053, 9): The expected type comes from property 'src' which is declared here on type 'DetailedHTMLProps&lt;ImgHTMLAttributes, HTMLImageElement&gt;'</p>
  <p>Full code below:</p>
  <pre><code>import React, { createRef, useRef, useState } from &quot;react&quot;;
  import Webcam from &quot;react-webcam&quot;;
  
  const WebcamCapture = () =&gt; {
      const webcamRef = useRef(null);
      const [imgSrc, setImgSrc] = useState(null);
  
      const capture = React.useCallback(() =&gt; {
          const imageSrc = webcamRef.current.getScreenshot();
          setImgSrc(imageSrc);
      }, [webcamRef, setImgSrc]);
  
      return (
          &lt;&gt;
              &lt;Webcam
                  audio={false}
                  ref={webcamRef}
                  screenshotFormat=&quot;image/jpeg&quot;
              /&gt;
              &lt;button onClick={capture}&gt;Capture photo&lt;/button&gt;
              {imgSrc &amp;&amp; (
                  &lt;img
                      src={imgSrc}
                  /&gt;
              )}
          &lt;/&gt;
      );
  };
  
  export default WebcamCapture;
  </code></pre>