React-Select component does not display a list of the options a user needs to select from

I want the dropdown menu to list the options I have created in the colors array. The reason I’m not using the react-bootstrap dropdown menu is that I want to use state to manipulate the elements of the header.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.css'
import { Navbar, Container, Nav, NavDropdown } from 'react-bootstrap'
import Select from 'react-select'

const Header = () => {
    var colors = [
        {
            value: 1,
            color: "Blue"
        },
        {
            value: 2,
            color: "Red"
        },
        {
            value: 3,
            color: "Green"
        },
        {
            value: 4,
            color: "Orange"
        },
    ];
    console.log(<Select options={colors.value}></Select>);
    return (
        <div>
            <Navbar bg="light" expand="lg">
                <Container>
                    <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="me-auto">
                        <Nav.Link href="#home">Home</Nav.Link>
                        <Nav.Link href="#link">About</Nav.Link>
                        <Nav.Link href="#link">Contact</Nav.Link>
                        <Nav.Link href="#link">blog</Nav.Link>
                        {/* <NavDropdown title="Dropdown" id="basic-nav-dropdown" options={colors}>
                        </NavDropdown> */}
                    </Nav>
                    <Select options={colors.value}></Select>
                    </Navbar.Collapse>
                </Container>
            </Navbar>
        </div>
    )
}

export default Header

Code output

Answer

var colors = [
    {
        value: 1,
        label: "Blue"
    },
    {
        value: 2,
        label: "Red"
    },
    {
        value: 3,
        label: "Green"
    },
    {
        value: 4,
        label: "Orange"
    },
];

Try to change all your key names from color to label.