How to target MAP to a styled component using React and Openlayers

I am trying to use Open layers + React js but trying to target map to a syled component it shows nothing like it doesn’t detect it. Iam following documentation but cant find something similar to this

Map Component:

import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import MapaBase from "../StyledComponents/Map";


export const Mapa = () => {

  new Map({
    target: "MapaBase",
    layers: [
      new TileLayer({
        source: new XYZ({
          url: "https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        }),
      }),
    ],
    view: new View ({
        center:[0,0],
        zoom: 2
    })
  });
  return (
    <>
      <MapaBase colores="red"/>
    </>
  );
};

Styled component:

import styled from "styled-components";

const MapaBase = styled.div`
width: 100%;
height: 500px;
background-color:${props => props.colores};
`;


export default MapaBase;