React component not re-rendering when variable updates, rendering must depend on variable not being null

Question

The code of the component PlayerNumber ends up assigning a value to a null variable named "sender". Finally, it updates a mock state so the Main component is forced to update, or so I thought. Despite the sender variable correctly updates, the PlayerNumber component keeps being displayed in the Main component.

This is the PlayerNumber component code:

const PlayerNumber = () => {

const [radio, setRadio] = useState(null)
const [garbage, setGarbage] = useState(0)

return (
    <div>
        <div>
            <header>
                <h1 className="center">players {radio} & sender {sender}</h1>
                </header>
                <div className="water">
                <h2>Select # of Players</h2>
                <form className="horizontal" onChange={(event) => setRadio(parseInt(event.target.value))}>
                <div className="royal">
                    <input name="jk" id="one" value="1" type="radio"  />
                    <label htmlFor="one"> 1 </label>
                </div>
                <div className="royal">
                    <input name="jk" id="two" value="2" type="radio"  />
                    <label htmlFor="two"> 2 </label>
                </div>
                <div className="royal">
                    <input name="jk" id="three" value="3" type="radio" />
                    <label htmlFor="three"> 3 </label>
                </div>
                <div className="royal">
                    <input name="jk" id="four" value="4" type="radio" />
                    <label htmlFor="four"> 4 </label>
                </div>
                </form>
                <br />
                <button className="fire" onClick={() => {
                    sender = radio
                    setGarbage(garbage + 1)
                    }}>✔️OK</button>
            </div>
        </div>
    </div>
)}

This is the Main component code:

function Main() {
    
    return (
        <div>
        {!sender && <PlayerNumber /> }
        </div>
    )}

The variable sender is defined outside of the components as null

Answer 1

In the end, I used this solution: React: How to render a parent component from child component?

Only, with hook-oriented code:

function Main() {
    const [index, setIndex] = useState(0)
    return (
        <div>
        {!sender && <PlayerNumber setIndex={i => setIndex(i)} /> }
        <p>{index}</p>
        </div>
    )}

Then in the child component

<button className="fire" onClick={() => {
                    sender = radio
                    props.setIndex(5)
                    }}>✔️OK</button>