Remove the down arrow symbol for the Dropdown.Toggle in react-bootstrap

Question

I am using dropdown menu where i am having a dropdown menu with icons of '@fortawesome/react-fontawesome' now in the <Dropdown.Toggle> I am using three dots icon with that i can access the dropdown but i am getting the down arrow which i don't want help me to remove the arrow. And remember this is a .tsx file and i don't have separate css file. We need to adjust style here itself.

This is code i am using

           <Dropdown>
                <Dropdown.Toggle
                variant="light" 
                id={`dropdown-basic-${index}`}
                
                style={{ 
                      padding: 0, 
                      border: 'none', 
                      backgroundColor: 'transparent',
                      marginLeft: '5px',
                      outline: 'none', // Remove outline when clicked
                      
                    }}
                    >
                  <FontAwesomeIcon icon={faEllipsisH}/>
                </Dropdown.Toggle>

                <Dropdown.Menu>
                  <Dropdown.Item onClick={() => handleDeleteFile(fileName)}>
                    <FontAwesomeIcon icon={faTrash} /> Delete File
                  </Dropdown`.Item>
                </Dropdown.Menu>
              </Dropdown> 

` I tried to add a className like this className="dropdown-toggle-no-caret" but this doesn't work