Assigning Array Element To a State Value

I'm attempting to build a Treasure Hunting game that is a 3x3 grid of clickable squares. When clicked, the revealed value can either be a "tree" or "treasure. There is only one "treasure".

The part I'm struggling with (at this point) is assigning my squares, a random element of the array. I have successfully altered my original array of 9 items to a random array of "tree"s and one "treasure". But how do I assign those array elements, that is shuffled each time the shuffle function is called, to random squares in my grid?

I attempted to map through the array of trees and my single treasure but failed to find a way to randomly assign those values to random squares as I want the game to have treasure in a different location most of the time.

I have pasted my full code below for reference.

Board.js

import React, { Component } from 'react';
import Square from './Square'


class Board extends Component {
    constructor(props){
        super(props)
        this.state = {
            spaces: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            boxOne: "?",
            boxTwo: "?",
            boxThree: "?",
            boxFour: "?",
            boxFive: "?",
            boxSix: "?",
            boxSeven: "?",
            boxEight: "?",
            boxNine: "?"
        }
    }
shuffle = (arr) => {
    for(let i = arr.length - 1; i > 0; i--) {
      const randomNum = Math.floor(Math.random() * (i + 1))
      [arr[i], arr[randomNum] = arr[randomNum], arr[i]]
    }
    let newArr = []
    arr.map(x => {
      if (x === 7) {
        newArr.push("Treasure")
      } else {
        newArr.push("Tree")
      }
    })
    this.setState({spaces: newArr})
}

  render() {
    return (
        <div className = "container">
            <div className = "board">
                <Square clickEvent={this.shuffle} boxOne={this.state.boxOne}
                boxTwo={this.state.boxTwo}
                boxThree={this.state.boxThree}
                boxFour={this.state.boxFour}
                boxFive={this.state.boxFive}
                boxSix={this.state.boxSix}
                boxSeven={this.state.boxSeven}
                boxEight={this.state.boxEight}
                boxNine={this.state.boxNine}
                newSpaces={this.state.spaces}
                />
            </div>
        </div>
    );
  }
}

export default Board;

Square.js

import React, { Component } from 'react';

class Square extends Component {
    render() {
        return(
            <div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxOne}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxTwo}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxThree}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxFour}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxFive}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxSix}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxSeven}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxEight}</div>
                <div className = "box" onClick = {this.props.shuffle} >{this.props.boxNine}</div>
            </div>
        )
    }
}

export default Square