You can use the below code:
const dropdownStyles: Partial<IDropdownStyles> = {
dropdown: { width: 300 }
};
const options: IDropdownOption[] = [
{ key: 'apple', text: 'Apple' },
{ key: 'banana', text: 'Banana' },
{ key: 'orange', text: 'Orange'},
{ key: 'grape', text: 'Grape' },
{ key: 'broccoli', text: 'Broccoli' },
{ key: 'carrot', text: 'Carrot' },
{ key: 'lettuce', text: 'Lettuce' }
];
const stackTokens: IStackTokens = { childrenGap: 20 };
Add below stack tag inside render return function
<Stack tokens={stackTokens}>
<Dropdown placeholder="Select an option" label="Basic uncontrolled example" options={options} styles={dropdownStyles} />
</Stack>
Above code with static JSON Data:
Now dynamically add the dropdown list using the SharePoint list data:
var items: IDropdownOption[]=[];
export interface IReactGetItemsState{
items: IDropdownOption[];
}
Then add then below constructor inside the class method to initialise the state
public constructor(props: ISpfxReactReadProps, state: IReactGetItemsState){
super(props);
this.state = {
items: []
};
}
Add the below ‘componentDidMount()’ method just below the constructor method. This method retrieves SharePoint list items using pnp sp js and sets it in the state using ‘setState’
public async componentDidMount(): Promise<void>
{
// get all the items from a sharepoint list
var reacthandler=this;
sp.web.lists.getByTitle("Projects").items.select('Title').get().then(function(data){
for(var k in data){
items.push({key:data[k].Title, text:data[k].Title});
}
reacthandler.setState({items});
console.log(items);
return items;
});
}
Example:

For details implementation refer to the below article:
SPFX Load SharePoint list items in a dropdown using PNP SP JS