title: No overload matches this call. Overload 1 of 2 -- Yesterday same project worked
body: <p>I have opened up the project that I have not touched since yesterday.</p>
  <p>Now, I am getting a typescript error for an object in a tsx component.</p>
  <pre class="lang-js prettyprint-override"><code>&lt;Shadowed {...getRootProps()} {...props} dropped={dropped} left={left} isDragActive={isDragActive} id='Drop zone'&gt;
        &lt;input {...getInputProps()} /&gt;
        {
          isDragActive ?
            &lt;p&gt;Drop the files here ...&lt;/p&gt;
            :
            !userHasntDropped ?
              &lt;DropHere /&gt;
              :
              &lt;FileCard file={dropped} isDragActive={isDragActive} selected={selected} /&gt;
        }
  &lt;/Shadowed&gt;
  
  </code></pre>
  <p>Dropped is a file I'm getting from the redux state:</p>
  <pre><code>const dropped: any = useSelector(state =&gt; left ? state.files.fileLeft : state.files.fileRight);
  </code></pre>
  <p>Shadowed is a styled-component:</p>
  <pre class="lang-js prettyprint-override"><code>const Shadowed = styled.div`
  
    height:${props =&gt; props.dropped &amp;&amp; props.dropped.length &gt; 0 ? '100px' : 'calc(50% - 50px)'};
    width:${props =&gt; props.dropped &amp;&amp; props.dropped.length &gt; 0 ? '240px' : '25%'};
    align-items:center;
    display:flex;
    justify-content:center;
    pointer-events: auto;
    align-self:${props =&gt; props.dropped &amp;&amp; props.dropped.length &gt; 0 ? 'flex-end' : 'center'};
    margin-bottom:25px;
    margin-top:25px;
  
    border:${props =&gt; props.dropped &amp;&amp; props.dropped.length &gt; 0 ? '1px solid rgba(0,0,0,0.20)' : 'null'};
    cursor:pointer;
  
    border-radius:8px;
      box-shadow:${props =&gt; props.dropped &amp;&amp; props.dropped.length &gt; 0 ? null : props.isDragActive ? '0px 0px 25px 5px rgba(0,0,0,0.15)' : '4px 4px 8px 0px rgba(0,0,0,0.06), -4px -4px 16px 10px #fff'};
      background:${props =&gt; props.isDragActive ? 'white' : 'rgb(252, 253, 254)'};
  
    &amp;:hover{
      box-shadow:0px 0px 25px 5px rgba(0,0,0,0.15);
      background:white;
    }
  `
  </code></pre>
  <p>Error I am getting:</p>
  <pre><code>C:/Users/danie/Code/compare/src/compareapp/ui/DropIt.tsx
  TypeScript error in C:/Users/danie/Code/compare/src/compareapp/ui/DropIt.tsx(62,46):
  No overload matches this call.
    Overload 1 of 2, '(props: Pick&lt;Pick&lt;Pick&lt;DetailedHTMLProps&lt;HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;, &quot;slot&quot; | &quot;style&quot; | ... 253 more ... | &quot;onTransitionEndCapture&quot;&gt; &amp; { ...; }, &quot;slot&quot; | ... 255 more ... | &quot;onTransitionEndCapture&quot;&gt; &amp; Partial&lt;...&gt;, &quot;slot&quot; | ... 255 more ... | &quot;onTransitionEndCapture&quot;&gt; &amp; { ...; } &amp; { ...; }): ReactElement&lt;...&gt;', gave the following error.
      Type '{ children: Element[]; dropped: any; left: Boolean; isDragActive: boolean; refKey?: string; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; suppressContentEditableWarning?: boolean; ... 249 more ...; onTransitionEndCapture?: (event: TransitionEvent&lt;...&gt;) =&gt; void; }' is not assignable to type 'IntrinsicAttributes &amp; Pick&lt;Pick&lt;Pick&lt;DetailedHTMLProps&lt;HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;, &quot;slot&quot; | ... 254 more ... | &quot;onTransitionEndCapture&quot;&gt; &amp; { ...; }, &quot;slot&quot; | ... 255 more ... | &quot;onTransitionEndCapture&quot;&gt; &amp; Partial&lt;...&gt;, &quot;slot&quot; | ... 255 more ... | &quot;onTransitionEndCapture&quot;&gt; &amp; { ...; } &amp; { ...; }'.
        Property 'dropped' does not exist on type 'IntrinsicAttributes &amp; Pick&lt;Pick&lt;Pick&lt;DetailedHTMLProps&lt;HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;, &quot;slot&quot; | ... 254 more ... | &quot;onTransitionEndCapture&quot;&gt; &amp; { ...; }, &quot;slot&quot; | ... 255 more ... | &quot;onTransitionEndCapture&quot;&gt; &amp; Partial&lt;...&gt;, &quot;slot&quot; | ... 255 more ... | &quot;onTransitionEndCapture&quot;&gt; &amp; { ...; } &amp; { ...; }'.
    Overload 2 of 2, '(props: StyledComponentPropsWithAs&lt;&quot;div&quot;, any, {}, never&gt;): ReactElement&lt;StyledComponentPropsWithAs&lt;&quot;div&quot;, any, {}, never&gt;, string | ... 1 more ... | (new (props: any) =&gt; Component&lt;...&gt;)&gt;', gave the following error.
      Type '{ children: Element[]; dropped: any; left: Boolean; isDragActive: boolean; refKey?: string; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; suppressContentEditableWarning?: boolean; ... 249 more ...; onTransitionEndCapture?: (event: TransitionEvent&lt;...&gt;) =&gt; void; }' is not assignable to type 'IntrinsicAttributes &amp; Pick&lt;Pick&lt;Pick&lt;DetailedHTMLProps&lt;HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;, &quot;slot&quot; | ... 254 more ... | &quot;onTransitionEndCapture&quot;&gt; &amp; { ...; }, &quot;slot&quot; | ... 255 more ... | &quot;onTransitionEndCapture&quot;&gt; &amp; Partial&lt;...&gt;, &quot;slot&quot; | ... 255 more ... | &quot;onTransitionEndCapture&quot;&gt; &amp; { ...; } &amp; { ...; }'.
        Property 'dropped' does not exist on type 'IntrinsicAttributes &amp; Pick&lt;Pick&lt;Pick&lt;DetailedHTMLProps&lt;HTMLAttributes&lt;HTMLDivElement&gt;, HTMLDivElement&gt;, &quot;slot&quot; | ... 254 more ... | &quot;onTransitionEndCapture&quot;&gt; &amp; { ...; }, &quot;slot&quot; | ... 255 more ... | &quot;onTransitionEndCapture&quot;&gt; &amp; Partial&lt;...&gt;, &quot;slot&quot; | ... 255 more ... | &quot;onTransitionEndCapture&quot;&gt; &amp; { ...; } &amp; { ...; }'.  TS2769
  
      60 | 
      61 |   return (
    &gt; 62 |     &lt;Shadowed {...getRootProps()} {...props} dropped={dropped} left={left} isDragActive={isDragActive}&gt;
         |                                              ^
      63 |       &lt;input {...getInputProps()} /&gt;
      64 |       {
      65 |         isDragActive ?
  </code></pre>
  <ol>
  <li>I've tried switching back to a previous typescript version but got the same error.</li>
  <li>I've tried adding types to the initialstate of redux</li>
  <li>I've tried if it is a styled-components error through this solution: <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245#issuecomment-446011384" rel="nofollow noreferrer">https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245#issuecomment-446011384</a></li>
  </ol>
  <p>What could be going on here?</p>
  <p>Thank you in advance</p>