title: "react-useanimations" Property 'animationKey' does not exist on type 'IntrinsicAttribute
body: <p>I have used &quot;react-useanimations&quot; plugin, when i run my project showing me the following error.
  <strong>Property 'animationKey' does not exist on type 'IntrinsicAttribute</strong></p>
  <ol>
  <li><p>common.js-&gt; common functions are written here (simple js file)</p>
  </li>
  <li><p>myjob.tsx-&gt; actual getTag function used on this page (typescript page)</p>
  <p>// Common.js file</p>
  <pre><code>import React from &quot;react&quot;;
  import UseAnimations from &quot;react-useanimations&quot;;
  
  export function getTag(tag: any) {
  if (tag === 'DL')
  return (
   &lt;UseAnimations animationKey=&quot;github&quot; size={56} style={{ padding: 100 }} /&gt;
  );
  }
  </code></pre>
  </li>
  </ol>
  <p>// myjob.tsx</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import SVG from &quot;react-inlinesvg&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  import { Alert, Nav, Tab } from &quot;react-bootstrap&quot;;
  import { toAbsoluteUrl } from &quot;../../_metronic/_helpers&quot;;
  import { utcToDate, getTag } from &quot;../../utils/common&quot;;
  import Icon from '@material-ui/core/Icon';
  import { MDBDataTableV5 } from 'mdbreact';
  import { Dropdown, Button } from &quot;react-bootstrap&quot;;
  import { DropdownCustomToggler } from &quot;../../_metronic/_partials/dropdowns&quot;;
  import Paper from '@material-ui/core/Paper';
  import Draggable from 'react-draggable';
  import { getUserJobList, deleteJobById } from &quot;../../app/modules/Job/_redux/jobCrud&quot;;
  import { shallowEqual, useSelector } from &quot;react-redux&quot;;
  export function MyJobs(props: any) {
  const [open, setOpen] = React.useState(false);
  const [openSnackbar, setOpenSnackbar] = React.useState(false);
  const [deleteJobId, setDeleteJobId] = useState(&quot;&quot;);
  const [key, setKey] = useState(&quot;Month&quot;);
  const [msg, setMsg] = useState(&quot;&quot;)
  const [type, setType] = useState&lt;&quot;success&quot; | &quot;primary&quot; | &quot;secondary&quot; | &quot;danger&quot; | &quot;warning&quot; | &quot;info&quot; | &quot;dark&quot; | &quot;light&quot; | undefined&gt;(&quot;success&quot;)
  const [jpbList, setJpbList] = useState([])
  const [displayBy, setDisplayBy] = useState(false)
  const [folders, setFolders] = useState()
  const user = useSelector((state: any) =&gt; state.auth.user, shallowEqual);
  const [datatable, setDatatable] = useState({
  columns: [
    {
      label: '#',
      field: 'icon',
      width: 150,
      attributes: {
        'aria-controls': 'DataTable',
        'aria-label': 'Name',
      },
    },
    {
      label: 'Job Name',
      field: 'name',
      width: 150,
      attributes: {
        'aria-controls': 'DataTable',
        'aria-label': 'Name',
      },
    },
    {
      label: 'Proccesed Date',
      field: 'createdDttm',
      width: 270,
    },
    {
      label: 'Status',
      field: 'status',
      width: 270,
    },
    {
      label: 'Action',
      field: 'action',
      width: 270,
    },
  ],
  rows: [{}],
  });
  
  useEffect(() =&gt; {
  if (!jpbList.length) {
    getList();
  }
  }, []);
  
  const getList = async () =&gt; {
  
  getUserJobList(user.id)
    .then((res: any) =&gt; {
      if (res.status == 200 &amp;&amp; res.data) {
        let rows: any = [];
        res.data.map((row: any) =&gt; {
          rows.push(
            {
              icon:&lt;img src={row.thumbnail} style={{ maxWidth: '50px', maxHeight: '50px' }} /&gt;,
              name: row.name,
              createdDttm: utcToDate(row.createdDttm),
              status: getTag(row.status),
              action: &lt;div style={{ width: '120px' }}&gt;
                {/* begin::Toolbar */}
                &lt;div className=&quot;d-flex justify-content-end&quot;&gt;
                  {
                    row.status == &quot;CO&quot; ?
                      &lt;Link to={`myjobs/markerpage/${row.id}`} className=&quot;btn btn-icon btn-sm mx-3&quot;&gt;
                        &lt;span className=&quot;svg-icon svg-icon-md svg-icon-primary&quot;&gt;
                          &lt;Icon className='fa fa-play' color=&quot;action&quot; /&gt;
                        &lt;/span&gt;
                      &lt;/Link&gt; : &quot;&quot;
                  }
                  &lt; Dropdown className=&quot;dropdown dropdown-inline&quot; alignRight&gt;
                    &lt;Dropdown.Toggle
                      id=&quot;dropdown-toggle-top-user-profile&quot;
                      as={DropdownCustomToggler}
                    &gt;
                      &lt;i className=&quot;ki ki-bold-more-hor&quot;&gt;&lt;/i&gt;
                    &lt;/Dropdown.Toggle&gt;
                    &lt;Dropdown.Menu className=&quot;dropdown-menu dropdown-menu-sm dropdown-menu-right&quot;&gt;
                    &lt;/Dropdown.Menu&gt;
                  &lt;/Dropdown&gt;
                &lt;/div&gt;
                {/* end::Toolbar */}&lt;/div &gt;,
            }
          )
        });
        let dt: any = [];
        dt.columns = datatable.columns;
        dt.rows = rows;
        setDatatable(dt);
        setJpbList(res.data);
      } else {
        setMsg(&quot;Something went wrong please try again later.&quot;)
        setType(&quot;danger&quot;)
      }
    })
    .catch((e: any) =&gt; {
      setMsg(&quot;Something went wrong please try again later.&quot;)
      setType(&quot;danger&quot;)
    });
   }
  
  return (
  &lt;&gt;
     &lt;MDBDataTableV5 hover entriesOptions={[10, 20, 50]} entries={10} pagesAmount={4} data={datatable} searchTop searchBottom={false} /&gt;
  &lt;/&gt;);
  }
  </code></pre>