I'm having trouble determining what element is passed via the proptype

Here is my components (simplified):

const MyButton = (props) => {
  return ( <button id={props.title} onClick={props.cb}/> );
}

MyButton.propTypes = {
  title: PropTyps.string.isRequired,
  cb: PropTypes.func.isRequired
};

class MySelect extends React.Component {
    ...
    ...

    render() {
        return ( 
            <select value={props.value} >
                {this.props.options.map((option, index) => (
                    <option key={index} value={option.text}>{options.text}</option>
                ))}
            </select>
       );
    }
}

MySelect.propTypes = {
    value: PropTypes.string.isRequired,
    options: PropTypes.arrayOf(PropTypes.shape({
        text: PropTypes.string.isRequired
    })).isRequired
};

My issue is in the render function of my main class, I need to determine what typeof props I have in order to know what to render.

export default class MyApp extends React.Component {
    ...
    ...
    
    render() {
        return (
            <div>
--> Wrong               {component instanceof MyButton && component}
--> Wrong               {component instanceOf MyButton && <MySelect value={component.props.value} options={component.props.options />
            </div>

    }
}

MyApp.propTypes = {
    component: PropTypes.oneOfType([
        PropTypes.instanceOf(MyButton),
        PropTypes.instanceOf(MySelect)
    ]).isRequired
};

I'm getting Failed prop type