How to add marker to google map based on data from API react

Question

So I have been trying to implement a google maps instance on my NextJS app, I got most things to work however, I want to display the data I'm fetching from an external source as 'markers' on the map.

For this I have been using the following code but the markers dont seem to show up.

import { Map, InfoWindow, Marker, GoogleApiWrapper, showInfoWindow } from 'google-maps-react';
import React, { Component } from 'react';

export class MapContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {

            data: null,
            showingInfoWindow: false,
            activeMarker: {},
            selectedPlace: {},
         
        };
    }


    componentDidMount() {
        // make fetch request
        fetch('api/twitter/search')
            .then(response => response.json())
            .then(data => this.setState({ data }));

    }

    onMarkerClick = (props, marker, e) =>
        this.setState({
            selectedPlace: props,
            activeMarker: marker,
            showingInfoWindow: true
        });

    onMapClicked = (props) => {
        if (this.state.showingInfoWindow) {
            this.setState({
                showingInfoWindow: false,
                activeMarker: null
            })
        }
    };



    render() {

        const { data } = this.state;
        console.log(data)





        return (
            <div>
             
                <Map google={this.props.google}
                    onClick={this.onMapClicked} width={50} height={50}
                    center={{
                        lat: 40.854885,
                        lng: -88.081807
                    }}>

                    {
                        data?.data.map((st) => (
                            <>
                                (
                                    {
                  st?.place &&
                                <Marker
                                    title={st?.user.name}
                                    name={'SOMA'}
                                    position={{ lat: 40.854885, lng: -88.081807 }}
                                    key={st?.id} />


                                    }
                                )

                            </>
                        ))
                    }
                </Map>
            </div>

        );
    }
}

export default GoogleApiWrapper({
    apiKey: ('#')
})(MapContainer)

The map shows up but there are no markers, I would like to display all the items fetched from the API into the Map, I'm not sure if I'm going about the right way by using a javascript map to display a number of markers.