How to mark multiple locations on a olmap

I want to highlight multiple points on the OpenLayers map,But writing code according to the syntax specification does not show the annotations But i don’t know why, there is something in my mind that i can’t tell, who can help me?

export default function Location() {
  useEffect(() => {
    const map = new Map({
      layers: [
        new TileLayer({
          source: new OSM({
            attributions: '',
          }),
        }),
      ],
      target: 'map',
      view: new View({
        // center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
        // center: [0, 0],
        // projection: 'EPSG:4326', // WGS84投影
        // center: [120, 30], // 经纬度中心点
        // zoom: 10,
        center: olProj.fromLonLat([73.0479, 33.6844]),
        zoom: 8,
      }),
    });
    const marker = new Overlay({
      position: olProj.fromLonLat([116.39, 39.9]),
    });

    map.addOverlay(marker);

    // 在dom渲染后获取overlay元素
    map.render(() => {
      const div = document.createElement('div');
      div.innerHTML = '坐标位置';
      div.style.backgroundColor="red";
      div.style.fontSize="2000px";
      div.style.padding = '1000px';
      marker.setZIndex(100000);
      marker.getElement().appendChild(div);
    });
  }, []);

  return (
    <div
      id="map"
      style={{
        height: 500,
        padding: '20px',
        paddingLeft: '70px',
        paddingRight: '50px',
      }}
    />
  );
}