Blank white screen on localhost:3000 in my react project - reactjs

Question

I am getting blank white screen on localhost:3000 in my React project. The components dont get rendered. I guess the issue is with one component, because when i comment out that component(SearchForm.js) from JSX, the other components do show up. Kindly highlight what could be the possiblities causing the issue. Thanks
SearchForm.js
import { Form, Col } from 'react-bootstrap'
export default function SearchForm({ params, onParamChange }) {
return (
<Form className="mb-4">
<Form.Row className="align-items-end">
<Form.Group as={Col}>
<Form.Label>Description</Form.Label>
<Form.Control onChange={onParamChange} value={params.description} name="description" type="text" />
</Form.Group>
<Form.Group as={Col}>
<Form.Label>Location</Form.Label>
<Form.Control onChange={onParamChange} value={params.location} name="location" type="text" />
</Form.Group>
<Form.Group as={Col} xs="auto" className="ml-2">
<Form.Check onChange={onParamChange} value={params.full_time} name="full_time" id="full-time" label="Only Full Time" type="checkbox" className="mb-2" />
</Form.Group>
</Form.Row>
</Form>
)
}
App.js
import React, { useState } from 'react';
import useFetchJobs from './useFetchJobs'
import { Container } from 'react-bootstrap'
import Job from './Job'
import JobsPagination from './JobsPagination';
import SearchForm from './SearchForm';
function App() {
const [params, setParams] = useState({})
const [page, setPage] = useState(1)
const { jobs, loading, error, hasNextPage } = useFetchJobs(params, page)
function handleParamChange(e) {
const param = e.target.name
const value = e.target.value
setPage(1)
setParams(prevParams => {
return { ...prevParams, [param]: value }
})
}
return (
<Container className="my-4">
<h1 className="mb-4">GitHub Jobs</h1>
<SearchForm params={params} onParamChange={handleParamChange} />
<JobsPagination page={page} setPage={setPage} hasNextPage={hasNextPage} />
{loading && <h1>Loading...</h1>}
{error && <h1>Error. Try Refreshing.</h1>}
{jobs.map(job => {
return <Job key={job.id} job={job} />
})}
<JobsPagination page={page} setPage={setPage} hasNextPage={hasNextPage} />
</Container>
)
}
export default App;

Answer 1

This seems okay, will need more information, Like how did you import and use it in another file.

Answer 2

After trying it out, I decided to just import { Row } directly from react-bootstrap.
But if you would like to continue with Form.Row, try checking how you imported bootstrap in index.js
import "bootstrap/dist/css/bootstrap.css";