title: How to define custom props in a react functional component with typescript?
body: <p>I just started a new react project with typescript and I'm having difficulty defining a custom prop in a functional component.</p>
  <p>I looked up how to define custom props and I found a way of defining an interface detailing the type of prop I'm passing in to the function, but when I try to run it on my main App, I get an error saying</p>
  <blockquote>
  <p>Type '{ digit: number; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'digit' does not exist on type 'IntrinsicAttributes'.  TS2322</p>
  </blockquote>
  <p>My code :</p>
  <pre><code>import React from 'react';
  import Button from '@mui/material/Button';
  export {}
  
  
  interface NumberButton {
    digit:number,
  }
  
  function NumberButton(props:NumberButton){
    return (
      &lt;Button variant=&quot;contained&quot; color=&quot;primary&quot;&gt;{props.digit}&lt;/Button&gt;
    )
  }
  </code></pre>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import ClearButton from './Components';
  import NumberButton from './Components';
  export default function App(){
  
    return (
      &lt;div&gt;
        &lt;ClearButton/&gt;
        &lt;NumberButton digit={1}/&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>I'm trying to get more familiar with functional components after using hooks and I'm hooked on using them.</p>