i have this code that when the button “New Chat” is pressed it will popup the modal

 return (
    
    <div className="w-full overflow-y-scroll p-4 text-black">
      
      {showPopup && (
        <Modal show={showPopup} onHide={togglePopup} centered>
          <Modal.Header closeButton>
            <Modal.Title>Modal title</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <Form>
              <Form.Group controlId="formInput">
                <Form.Label>Input:</Form.Label>
                <Form.Control
                  type="text"
                  placeholder="Enter text"
                  value={inputValue}
                  onChange={handleChange}
                />
              </Form.Group>
            </Form>
          </Modal.Body>
          <Modal.Footer>
            <Button2 variant="secondary" onClick={togglePopup}>
              Close
            </Button2>
            <Button2 variant="primary" onClick={handleSubmit}>
              Submit
            </Button2>
          </Modal.Footer>
        </Modal>
      )}
      
      <Button1 className="w-full border-dashed border-black border" variant={"outline"} onClick={togglePopup}>
        <PlusCircle className="mr-2 w-4 h-4" />
        New Chat
      </Button1>

The thing is that everything is working fine Just that the CSS of the bootstrap will go missing whenever i click it

How the “Bootstrap Modal” looks like

the Submit button and closing of the modal works perfectly fine.

I suspect its because this is because the modal is being rendered as a children instead of the main container. Hence only showing up at the bottom of the screen. how do i fix it ?

The modal to look something like a Popup Modal in the photo below

Sample that i want