embed one or more html forms in a reactjs carousel

I am new to reactjs and struggling with creating multiple forms with a carousel effect. Effectively I want to be able to slide sideways between multiple forms (in the long run, I want to be able to add/remove forms as well). All forms are following same logic, but will vary in length.

How can I implement one or more html forms in reactjs carousel with the code below?

import React, {useState} from "react";
import Carousel from 'react-bootstrap/Carousel';

function Home (){

  return (
    <Carousel variant="dark" controls="true">
    <Carousel.Item>
      <FORM 1></FORM>
    </Carousel.Item>
    <Carousel.Item>
      <FORM 2></FORM>
      <Carousel.Caption>
      </Carousel.Caption>
    </Carousel.Item>
    <Carousel.Item>
      <FORM 3></FORM>
      <Carousel.Caption>
      </Carousel.Caption>
    </Carousel.Item>
  </Carousel>
  )
}
export default Home;
How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum