I couldn't make a select element display what's selected on react

Question

import { Component } from "react";
import "./App.css";
import { CardList } from "./components/card-list/card-list.component";
import { products } from "./JSONs/products";

import { SearchBox } from "./components/search-box/search-box.component";

class App extends Component {
  constructor() {
    super();

    this.state = {
      monsters: products,
      searchField: "",
      searchParameters: "name",
      optionAttributes: [
        {
          key: "0",
          value: "name",
          name: "Name",
        },
        {
          key: "1",
          value: "madeIn",
          name: "Made In",
        },
        {
          key: "2",
          value: "price",
          name: "Price",
        },
        {
          key: "3",
          value: "desc",
          name: "Description",
        },
      ],
    };
  }

  // code to fetch data from the internet but I use this offline so I chose to create my own json file and read from that.

  // componentDidMount() {
  //   fetch("https://jsonplaceholder.typicode.com/users")
  //     .then((response) => response.json())
  //     .then((users) => this.setState({ monsters: users }));
  // }

  render() {
    const { monsters, searchField } = this.state;
    const filteredMonstersByName = monsters.filter((monster) =>
      monster.name.toLowerCase().includes(searchField.toLowerCase())
    );
    const filteredMonstersByMadeIn = monsters.filter((monster) =>
      monster.madeIn.toLowerCase().includes(searchField.toLowerCase())
    );
    const filteredMonstersByPrice = monsters.filter((monster) =>
      monster.price.toLowerCase().startsWith(searchField.toLowerCase())
    );
    const filteredMonstersByDesc = monsters.filter((monster) =>
      monster.description.toLowerCase().includes(searchField.toLowerCase())
    );

    const Selector = (props) => (
      <select
        className="form-control"
        onChange={(e) => this.setState({ searchParameters: e.target.value })}
      >
        <Optionor
          key={this.state.optionAttributes[0].key}
          value={this.state.optionAttributes[0].value}
          name={this.state.optionAttributes[0].name}
        />
        <Optionor
          key={this.state.optionAttributes[1].key}
          value={this.state.optionAttributes[1].value}
          name={this.state.optionAttributes[1].name}
        />
        <Optionor
          key={this.state.optionAttributes[2].key}
          value={this.state.optionAttributes[2].value}
          name={this.state.optionAttributes[2].name}
        />
        <Optionor
          key={this.state.optionAttributes[3].key}
          value={this.state.optionAttributes[3].value}
          name={this.state.optionAttributes[3].name}
        />
      </select>
    );

    const Optionor = (props) => (
      <option key={props.key} value={props.value}>
        {props.name}
      </option>
    );

    return (
      <div className="App">
        <SearchBox
          placeholder="Search for a monster"
          handleChange={(e) => this.setState({ searchField: e.target.value })}
        />
        <Selector />
        {this.state.searchParameters === "name" ? (
          <CardList monsters={filteredMonstersByName} />
        ) : this.state.searchParameters === "madeIn" ? (
          <CardList monsters={filteredMonstersByMadeIn} />
        ) : this.state.searchParameters === "price" ? (
          <CardList monsters={filteredMonstersByPrice} />
        ) : this.state.searchParameters === "desc" ? (
          <CardList monsters={filteredMonstersByDesc} />
        ) : (
          <CardList monsters={monsters} />
        )}
      </div>
    );
  }
}

export default App;

I wanted to make it select some option and based on that option I'll be able to change the option my search bar will search in for example by name or price or made in country things like that. So by looking at stack Overflow similar questions I solved the problem of selecting an option but the option is not displaying now. It selects but it won't show that it's selected. And "selected attribute couldn't work or maybe I didn't know how to implement it on react.

Look at the state that says searchParameter on the right bottom side, that is the right value and my selector should've selected that option instead of being on name still. The screenshot for the page with react dev tools open on the side