Masonry in react, acts a a normal div and image size too big

Masonry in react, acts like a normal div and image size too big, here below is the code for the page.

import React from "react";
import { MDBRow } from "mdbreact";
import "./insp.css";
import { Container } from "react-bootstrap";
import Masonry from 'masonry-layout';
import { Text, Div, Row, Col, Image } from "atomize";
//Images From Folder
import image from "../../../src/img/trybmockup1.jpg";
import image1 from "../../../src/img/trybmockup2.jpg";
import image2 from "../../../src/img/trybmockup3.jpg";
import image3 from "../../../src/img/trybmockup4.jpg";
import image4 from "../../../src/img/trybmockup5.jpg";
import image5 from "../../../src/img/trybmockup6.jpg";
import image6 from "../../../src/img/trybmockup7.jpg";

const   Inspiration = () => {

    const grid = document.querySelector('.grid');
    const masonry = new Masonry(grid, {
        itemSelector: 'grid-item',
    });

    return (
        
        <Container>
            <div class="grid">
                <div class="grid-item"><img src={image} alt="images"/></div>
                <div class="grid-item"><img src={image1} alt="images"/></div>
                <div class="grid-item"><img src={image2} alt="images"/></div>
                <div class="grid-item"><img src={image3} alt="images"/></div>
                <div class="grid-item"><img src={image4} alt="images"/></div>
                <div class="grid-item"><img src={image1} alt="images"/></div>
                <div class="grid-item"><img src={image5} alt="images"/></div>
                <div class="grid-item"><img src={image6} alt="images"/></div>
             </div>
            
        </Container>  
    )

}

export default Inspiration;

Any help at all is greatly appreciated thanks If more code is needed please just ask

output below!