how to use function components in react typescript

1import React from 'react';
2
3interface Props {
4  
5}
6
7export const App: React.FC<Props> = (props) => {
8  return (
9    <>
10     <SomeComponent/>
11    </>
12  );
13};

1// Function Component ( with props and default props ):
2
3import React from "react";
4
5type Props = {
6
7  linkFirst: string,
8
9  routeFirst: string,
10
11  head?: string,
12
13  linkSecond?: string,
14
15  routeSecond?: string
16
17};
18/* Default props appear when no value for the prop 
19is present when component is being called */
20
21const DefaultProps = {
22  head: "Navbar Head not found"
23};
24
25const Navbar: React.FC <Props> = (props) => {
26  return (
27	<div>
28		<nav>
29		{ props.head }
30			<ul>
31			<li> 
32			<a href={ props.routeFirst }> {props.linkFirst} </a>
33			<li> 
34			<a href= { props.routeSecond }> {props.linkSecond} </a>
35			</li>
36   			</ul>
37		</nav>
38	</div>
39  );
40};
41/* Initializing DefaultProps constant to defaultProps 
42so that this constant works. */
43
44Navbar.defaultProps = DefaultProps;
45export default Navbar;