How do I set a state from a prop in React?

I am newish to React and am using React Select (https://react-select.com/) to create a dropdown list. I want to wrap this in my own component, so I can send React Select a specific set of props based off the props I give the wrapping component.

Whilst I have wrapped React Select in my own component fine, I am unable to figure out how to set React Select’s states with my wrapping component’s props.

Eg I want to set the isDisabled value, and have the following:

import React from "react";
import { useState } from "react";
import Select from 'react-select';
import './select.scss';
import PropTypes from 'prop-types';

const MySelect = ({ options, disable }) => {

  const [isDisabled, setIsDisabled] = useState(disable);

  return (
    <Select 
      options={options} 
      isDisabled={isDisabled}
    />
  );
};

MySelect.propTypes = {
  disable: PropTypes.bool,
  options: PropTypes.array,
};

MySelect.defaultProps = {
  disable: false,
  options: [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' }
  ]
};

export default MySelect;

Whilst React Select does respect the disable prop when I set the default, eg:

MySelect.defaultProps = {
      disable: true,

It does not respect it when I call the component itself, eg:

<MySelect options={someOptions} disable={true} />

Would anyone know what I’m doing wrong here?