I'm building a tic-tac-toe app. I haven't added functionality between the X's and O's, right now, I'm stuck on rending ONE image via the onClick. I've set the state to make the onClick - at least I think - and I've written out my conditional, but its rendering X images for each square. How do I render an image for only ONE square instead of them all? Here is my code:

Xs.js

import React from 'react'
import styled from 'styled-components'
import X1 from './images/X1.jpg'
import X2 from './images/X2.jpg'
import X3 from './images/X3.jpg'


const Image = styled.img`
  width: 175px;
  height: 175px; 
`

const Xs = () => {

    const X = [X1, X2, X3]     
    const randomXImg = Math.floor(Math.random() * X.length)
   
    
  return (
    <Image src={X[randomXImg]} />
  )
}

export default Xs

Cell.js - this is just a div to show for the actual square

import React from 'react'
import styled from 'styled-components'

const CellBlock = styled.div`
    display: flex;
    align-items: center;
    justify-content;
    border: 1px solid white;
    width: 200px;
    height: 200px;
    background-color: white;    
`

const Container = styled.div`
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
`

const Board = styled.div`
  display: grid;
  grid-template-columns: 210px 210px 202px;
  grid-template-rows: 210px 210px 202px;
  background-color: darkgreen;
  `

const Cell = ({ onClick, isTurn, children }) => {

  let squares = []
  squares = Array.from(Array(9).fill(''))

  return (
   <Container>
     <Board>
      {
      squares.map((box, id) => (
        <CellBlock 
        key={id} 
        id={id} 
        onClick={onClick}
        isTurn={isTurn}        
        >
          {children}
        </CellBlock>
      ))
      }       
    </Board>    
  </Container> 
    
  )  
}

export default Cell

Here is the gameboard which is the parent component of both Xs.js and Cell.js Gameboard.js

import React, { useState } from 'react'
import Cell from './Cell'
import Xs from './Xs'


const Gameboard = () => {
    const [ player, setPlayer ] = useState('X')
    const [ isNotOccupied, setIsNotOccupied ] = useState(false)
      
             
    return (
        <>
         <Cell 
          onClick={() => setIsNotOccupied(!isNotOccupied)}
          isTurn={player}
         >
           { isNotOccupied && player === 'X' && <Xs />}       
         </Cell>
        </>
    )
}

export default Gameboard

Any help would be greatly appreciated.