How can I group 4 cell in a row in jsx?

Here is my code:

    import { Col, Container, Row } from "react-bootstrap";
import { useTrafficSnapShot } from "./useTrafficSnapShot";
export default function TrafficSnapShot() {
    let [error, isLoading,
        selectedSnapShotList,
        searchSnapShot] = useTrafficSnapShot();
    return (
        <div>
            {
                !isLoading &&
                <Container fluid>
                    <Row><Col>Traffic Snap Shot</Col></Row>
                    <Row>
                        <Col><input onChange={e => searchSnapShot(e.target.value)} required type="text" /></Col>
                    </Row>
                    {
                        selectedSnapShotList.map((snapShort, index) => {
                            let temp = [], obj;
                            obj = <Col><div>{snapShort.location}</div></Col>

                            if ((index % 4) === 0) {
                                temp.push(<Row>);
                            }
                            temp.push(obj);
                            if ((index % 3)===0 ){
                                temp.push(</Row>)
                            }
                            return temp;
                        })

                    }
                </Container>
            }
        </div>
    )
}

I want to group 4 Col in a Row.
I got the following error message on temp.push(</Row>).

Line 26:43:  Parsing error: Unexpected token (26:43)

How can I fix the problem?