passing parent's state to child's prop and is seen as 'undefined'

I'm trying to build the game Yahtzee.. and I'm facing an issue when trying to pass from parent class DiceRow the value of a randomly chosen number to child class Die, in function initDice within DiceRow:

import React, { Component } from 'react'
import Die from './Die';
import './DiceRow.css';
import { rollDie } from './helper';

export default class DiceRow extends Component {
    constructor(props){
        super(props);
        this.state = {
            dices: [rollDie(), rollDie(), rollDie(), rollDie(), rollDie()],
            isDisabled: [false, false, false, false, false]
        }
        this.handleRoll = this.handleRoll.bind(this);
        this.handleDieClick = this.handleDieClick.bind(this);
        this.initDice = this.initDice.bind(this);

    }

    handleDieClick(id){ // means we need to disable the clicked die

    }

    handleRoll(){
        let new_dices_values = [];

        for(let i=0; i<this.state.dices.length; i++){
            if(!this.state.isDisabled[i]){ // only if is disabled === false
                new_dices_values[i]=rollDie();
            }
            else {
                new_dices_values[i]=this.state.dices[i];
            }
        }
d
        this.setState({
            dices: new_dices_values
        });
        

    }

    initDice(){
        let dices = [];
        for(let i=0; i<this.state.dices.length; i++){
            dices[i] = <Die onClick={this.handleDieClick} value={this.state.dices[{i}]} key={i} id={i}/>
        }
        return dices;
    }

  render() {
    let dices = this.initDice();
    return (
        <div>
      <div className='DiceRow'>
            {dices}
        <div>
        </div>
      </div>
        <button onClick={this.handleRoll} className='DiceRow-RollBtn'>Roll Dice!</button>
      </div>
    )
  }
}

Die.js

import React, { Component } from 'react';
import './Die.css';
import {rollDie} from './helper';

export default class Die extends Component {

    constructor(props){
        super(props);
        this.state = {
            isRolling: false,
            disableRolling: false
        }
    }
  render() {

    let whichDie = <i className={`fa-solid fa-dice-${this.props.value} fa-5x`}></i>
    
    return (
      <div>
        <div className='Die'>
            {whichDie}
        </div>
    </div>
    )
  }
}

which results in my Dice not to appear ;'(

Thanks in advance, may you all have a day without compilation errors :-D