Button exercise: typescript errors

src/App.tsx

@@ -10,7 +10,7 @@ function App() {
 
   return (
     <div>
-      <Button onClick={handleOnClick} color="secondary">My Button</Button>
+      <Button onClick={handleOnClick} color="success">My Button</Button>
     </div>
   );
 }

src/components/Button.tsx

@@ -1,11 +1,11 @@
 
 interface Props {
     children: string;
-    color: string;
+    color?: 'primary' | 'secondary' | 'success';
     onClick: () => void;
 }
 
-export const Button = ({ children, color, onClick }: Props) => {
+export const Button = ({ children, color='primary', onClick }: Props) => {
     //const buttonType = "btn " + "btn"+"-"+{type};
   return (
     <button type="button" className={'btn btn-'+color} onClick={onClick}>{children}</button>