How to Programmatically Clear/Reset React-Select

How to clear react-select values on button click without adding it to options?

You need to manage the state of the selected values and the options yourself and manipulate it accordingly:

export default function App() {
  const [selected, setSelected] = useState([]);
  const [options, setOptions] = useState([
    { value: "male", label: "Male" },
    { value: "female", label: "Female" }
  ]);

  const handleClear = () => {
    setOptions((currentOptions) => currentOptions.filter((currentOption) => !selected.includes(currentOption)));
    setSelected([]);
  };

  return (
    <div className="App">
      <h1>Select Gender</h1>
      <Select isMulti value={selected} options={options} onChange={setSelected} />
      <button onClick={handleClear}>Clear Value</button>
    </div>
  );
}

Edit react-select-clear-input (forked)

React-Select: How to clear a selection value when another selection value change

You can always just make a new function that does both and pass it in for the onClick

const changeMaterial = (picked) =>{
  setMaterial(picked.value);
  setSize(null)
}
<Select 
  value={material} 
  onChange={(picked)=>changeMaterial(picked)} 
  options={materialOptions} 
  isClearable
/>

or add a useEffect that sets the size back to null when the material changes:

useEffect(()=>{
  setSize(null)
},[material])

reset/clear selected values in select-option on button click in React.js?

The thing you are doing wrong is in handleReset function you are taking the event and you are setting the target value to empty which is ideally wrong.
In order to correct it we need to understand how the flow is working, you are using handleChange function in order to set the values to your state.
So in order to reset it you need to reset the value of the state only.

So the code becomes like this:

const handleReset = () => {
    setValue("");   
}

Now this will reset the value of your state variable and also use your state variable in your select method which will resolve the problem.

<select value={value}>
<option></option>
.
.
</select>

To make dynamic field working:

function App() {
  const [value, setValue] = useState({});
  const arr = ["hello", "cra"];
  const arr2 = [
    {
      name: "hello",
      id: "1",
    },
    {
      name: "test2",
      id: "2",
    },
  ];

  const handleChange = ({ target: { value: val, name } }) => {
    setValue({ ...value, [name]: val });
  };

  const resetValue = () => {
    setValue({});
  };

  console.log(value);

  return (
    <div id="wrapper">
      <select
        name="select1"
        value={value.select1 || ""}
        onChange={handleChange}
      >
        <option value=""></option>
        {arr.map((val) => {
          return <option value={val}>{val}</option>;
        })}
      </select>
      <select
        name="select2"
        value={value.select2 || ""}
        onChange={handleChange}
      >
        <option value=""></option>
        {arr2.map(({ name, id }) => {
          return <option value={id}>{name}</option>;
        })}
      </select>
      <button onClick={resetValue}>Reset</button>
    </div>
  );
}

How to reset the react-select component to defaultValue state after form submit

import Select from 'react-select';

export class Test extends Component {
  this.setState = {
    selection: 0,
   };

  onSelectChange = (e) => {
    this.setState({ selection: e.value });
  }

  onSubmit = (e) => {
    e.preventDefault();
    const { selection } = this.state;
    // Post request logic comes here
    // Reset Select component to original default state
    this.setState({selection: 0});
  }

  render() {

    const options = [
      { label: 'Choose something', value: 0 },
      { label: 'Item 1', value: 1 },
      { label: 'Item 2', value: 2 },
    ];

    return (
      <form onSubmit={this.onSubmit}>
        <Select
          options={options}
          value={this.state.selection}
          onChange={this.onSelectChange}
        />
       //submit button here          
      </form>
    );

Use value prop instead of defaultValue and manage it through state.On Submit, reset that state to initial value i.e 0.

react-select: Clear selected value during onChange from another Select

You can control the value of the first Select and reset it whenever you change the second one:

const [value, setValue] = React.useState(null);

return (
  <>
    <Select options={options1} value={value} onChange={setValue} />
    <Select options={options2} onChange={() => setValue(null)} />
  </>
);

Codesandbox Demo