Цикл React для создания массива

Я пытался создать "простой" массив. У меня есть 2 переменные, с которыми я хочу провести расчеты, а затем добавить результат в массив в ReactJS.

// Import Node Modules
import styled, { css } from 'styled-components'
import PropTypes from 'prop-types'
import React, { Component } from "react";

// Variables
const columns = props => props.columns; // is set to 3
const width = props => props.width;     // is set to 300
const Breakpoint = width * columns;
let list  = "";

// this should be generated by looping over columns and width like [1*300,2*300,3*300] 

/*
const sizes = [];
var i;
for (i = 0; i < columns; i++) { 
    sizes.push(width * i)
}
*/

// but this obvisouly doesn't work in react :(


const sizes= [300,600,900]

// Class
{sizes.map(function(size, index){
  list = list + `@media (min-width: ${size}px) { grid-template-columns: repeat(${index + 1}, 1fr);};`
})}

let medias = css`${list}`;

export const GridContainer = styled.div`
  display: grid;
  grid-gap: ${props => props.gap}px;
  ${medias}
`

Я надеюсь, что кто-нибудь сможет направить меня в правильном направлении.