Cannot get to work with background URL

[arhoy]

Here is my simplified code example "Block" renders image perfectly while "Review" show a blank screen

import React from 'react';
import styled from '@emotion/styled';
import Swiper from 'react-id-swiper';

const Container = styled.div`
  max-width: 1500px;
  background: ${(props) => props.theme.colors.white};

  box-shadow: 5px 5px 25px rgba(118, 118, 118, 0.15);
  margin: 0 auto;
  & .swiper-button-next,
  .swiper-button-prev {
    color: ${(props) => props.theme.colors.primary};
    @media (max-width: 400px) {
      display: none;
    }
  }
  & .swiper-pagination-bullet-active {
    background: ${(props) => props.theme.colors.primary};
  }
`;

const Review = styled.div`
  text-align: center;
  margin: 0 auto;
  width: 100%;
  height: 30rem;
  background-repeat: no-repeat;
  background-image: url(${(props) => console.log(props.url) && props.url});
  & .content {
    @media (max-width: 1200px) {
      width: 80%;
      margin: 0 auto;
    }
    @media (max-width: 600px) {
      width: 90%;
      margin: 0 auto;
    }
    & .reviewer_name {
      margin-top: 0.5rem;
      &::before {
        content: '-';
      }
    }
    & h4 {
      font-size: 2rem;
      margin-bottom: 0.5rem;
    }
    position: absolute;
    color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
`;

const Block = styled.div`
  width: 100%;
  height: 10rem;
  background-image: url(${(props) => props.url});
`;

export const ReviewSlider = ({ reviews }) => {
  const params = {
    lazy: true,

    spaceBetween: 30,
    slidesPerView: 1,
    centeredSlides: false,
    centerInsufficientSlides: true,
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    breakpoints: {
      1024: {
        slidesPerView: 1,
        spaceBetween: 30,
      },
      768: {
        slidesPerView: 1,
        spaceBetween: 30,
      },
      640: {
        slidesPerView: 1,
        spaceBetween: 20,
      },
      320: {
        slidesPerView: 1,
        spaceBetween: 5,
      },
      100: {
        slidesPerView: 1,
        spaceBetween: 0,
      },
    },
  };

  return (
    <Container>
      <Swiper {...params}>
        {reviews.map((review, i) => (
          <div>
            <Review
              key={i}
              url="http://edmrealty-com.stackstaging.com/wp-content/uploads/2020/04/edmonton_review_1.png"
            >
              <div className="content">
                <h4> {review.acf.title} </h4>
                <p
                  dangerouslySetInnerHTML={{ __html: review.acf.description }}
                />
                <p className="reviewer_name"> {review.acf.name_of_reviewer} </p>
              </div>
            </Review>
          </div>
        ))}
      </Swiper>
      <Block url="http://edmrealty-com.stackstaging.com/wp-content/uploads/2020/04/edmonton_review_1.png"></Block>
    </Container>
  );
};

How can I get it to work with background: url (source to url here) ?