Why is my React Function component not appearing? [closed]

My code snippet is below. This is meant to be a small CRUD web application and I have created a simple header component using React-Bootstrap. However, it simply won’t appear when I run “npm start”. Instead, everything else renders and it simply does not. I have tried fixing its position and checking imports, I think I am missing something here.

const App = () => {
  const [department, setDepartment] = React.useState("");
  const [machine, setMachine] = React.useState("");
  const [area, setArea] = React.useState("");
  const [shift, setShift] = React.useState("");
  const [code, setCode] = React.useState("");
  const [scrapList, setScrapList] = React.useState([]);

  const scrapCode = [
    { value: "More than 5 Holes", label: "More Than 5 Holes" },
    { value: "Hole By Lugs", label: "Hole By Lugs" },
    { value: "Any Hole In Center", label: "Any Hole In Center" },
    { value: "Crack Anywhere In Frame", label: "Crack Anywhere In Frame" },
    { value: "Bent On Corners", label: "Bent On Corners" },
    { value: "Damage Lugs", label: "Damage Lugs" },
    { value: "Repairs Groups", label: "Repairs Groups" },
    { value: "Missing Cut Foot", label: "Missing Cut Foot" },
    { value: "Missing Cut on Plate", label: "Missing Cut on Plate" },
    { value: "Bow In", label: "Bow In" },
    { value: "Wrong Hole Location", label: "Wrong Hole Location" },
    { value: "Repair Batteries", label: "Repair Batteries" },
  ];

  const secondScrapCode = [{ value: "Dummy Value", label: "Dummy Value" }];

  let type = null;

  if (department === "Assembly" || area === "Stacking") {
    type = scrapCode;
  } else {
    type = secondScrapCode;
  }

  useEffect(() => {
    Axios.get("http://localhost:3001/api/get")
      .then((response) => {
        setScrapList(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);
  const submitList = () => {
    Axios.post("http://localhost:3001/api/insert", {
      department: department,
      machine: machine,
      area: area,
      shift: shift,
    });
    setScrapList([
      ...scrapList,
      {
        department: department,
        machine: machine,
        area: area,
        shift: shift,
      },
    ]);

    alert("Submitted!");
  };

  const handleCodeSelect = (e) => {
    setCode(e);
    console.log(e);
  };

  return (
    
      
    <div className="main">
    
      <InstructionToast></InstructionToast>
      <div>
      <Header></Header>
        <DepartmentCard setDepartment={setDepartment}></DepartmentCard>

        <AreaCard setArea={setArea}></AreaCard>
      </div>

      <div>
        <MachineCard setMachine={setMachine}></MachineCard>
      </div>
      <CodeToast></CodeToast>
      <div className="react-select-dropdown">
        <Select
          placeholder="Select Code"
          options={type}
          value={code}
          onChange={handleCodeSelect}
        />
      </div>
      <ShiftCard setShift={setShift}></ShiftCard>
      <div className="submitBtn">
        <Button onClick={submitList}>Submit</Button>
      </div>
    </div>
    
  );
};

export default App;

My React.js application is structured pretty simply. All of the components show except for the Header component. Does anyone have an idea what is going on? There are no errors in the browser or terminal. Everything runs fine, its just that the header wont render.

https://github.com/calebdockal/usb-v2-published

This is the link to the project in question.

Answer

I cloned the project and in fact it looks like Carousel is not working properly.

However the problem is the Caption container, By Deleting only

<Carousel.Caption>

the Carousel will appear