Display WFS and WMS available datasets

My project is small, just a prove of concept. I need to display WFS and WMS data that are located in a geoserver already (have the url) in a react application. The app only uses a dropdown list to show the user the available datasets and whenever the user clicks on these the WFS or WMS will be added to the map. Should be able to select more than one data layer at the same time. It's very straight forward.

I needed it asap. thanks