Set the default value in react-select component

Players.js

import React, {Component} from 'react';
import Select from 'react-select';

class Players extends Component {
    state = {
        defaultSelected: 2,
        playerOptions: [
            { value: 1, label: 'Lebron'},
            { value: 2, label: 'Davis'}
        ]
    };
    handleChange = selectedPlayer  => {
        this.setState({
            defaultSelected: selectedPlayer.value
        });
    }
    render() {
        const {defaultSelected, playerOptions} = this.state;
        return (
            <div>
                <h2>Players</h2>
                <Select
                    value={playerOptions.filter(({value}) => value === defaultSelected)}

                    onChange={this.handleChange}
                    options={playerOptions}
                />
            </div>
        );
    }
}

export default Players;

import React, { useState } from 'react';
import Select from 'react-select';

const Players = () => {
const [defaultSelected, setDefaultSelected] = useState(2);
const [playerOptions] = useState([
{ value: 1, label: 'Lebron'},
{ value: 2, label: 'Davis'}
]);

const handleChange = selectedPlayer => {
    setDefaultSelected(selectedPlayer.value);
};

return (
    <div>
        <h2>Players</h2>
        <Select
            value={playerOptions.filter(({ value }) => value === defaultSelected)}
            onChange={handleChange}
            options={playerOptions}
        />
    </div>
);

};

export default Players;