const [teams] = useState([

{ id: 1, name: 'Team A' },

{ id: 2, name: 'Team B' },

{ id: 3, name: 'Team C' }

]);

const [players, setPlayers] = useState([

{ id: 1, name: 'John Doe', dob: '1990-01-01', gender: 'Male', position: 'Forward',
team: 1 },

{ id: 2, name: 'Jane Smith', dob: '1992-02-02', gender: 'Female', position:

'Midfielder', team: 1 },

{ id: 3, name: 'Sam Johnson', dob: '1988-03-03', gender: 'Male', position:

'Defender', team: 2 },

{ id: 4, name: 'Alice Brown', dob: '1995-04-04', gender: 'Female', position:

'Goalkeeper', team: 2 },

{ id: 5, name: 'Bob Davis', dob: '1991-05-05', gender: 'Male', position: 'Forward',
team: 3 }

]);

1. Using react-bootstrap to display the list of teams and players

2. Create a form for adding new player
3. Create a filter the player.