How to modify grid-template-areas with javascript

Question

I have been trying to modify grid-template-areas with javascript. I found a property in the css properties list (elem.style) in the DOM called:

Answer 1

with styled-components

const Grid = styled.div`
  width: 100px;
  height: 100px;
  background-color: red;
  display: grid;
  grid-template-areas: ${(props) => props.areas 
  ? props.areas.reduce((acc, str) => (acc += `${"'" + str + "'" + "\n"}`), ``) + ";" 
  : "none"};
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
`

const StyledGrid = () => (
  
)