Getting "input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`." with Material UI

Question

The line causing the error is: input={<TextInput notched label={props.label} />} The Select is below

import React, { ChangeEvent } from "react";
import { makeStyles, withStyles } from "@mui/styles";
import MenuItem from "@mui/material/MenuItem";
import { SelectProps } from "@mui/material/Select";
import MaterialUISelect from "@mui/material/Select";
import InputBase from "@mui/material/InputBase";
import ArrowDropDownRoundedIcon from "@mui/icons-material/ArrowDropDownRounded";
import { DropdownStyle, SelectStyle } from "./Select.styles";
import TextInput from "../TextInput";

const useStyles = makeStyles(DropdownStyle);
const SelectStyled = withStyles(SelectStyle)(MaterialUISelect);

export interface option {
  label: string;
  value: any;
}

export interface SelectInputProps extends SelectProps {
  options: option[];
}

export default function Select({ options, ...props }: SelectInputProps) {
  const classes = useStyles();
  return (
    <SelectStyled
      input={<TextInput notched label={props.label} />}
      defaultValue={"None"}
      displayEmpty
      MenuProps={{
        classes: { paper: classes.dropdown },
        anchorOrigin: {
          vertical: "top",
          horizontal: "left"
        },
        transformOrigin: {
          vertical: "top",
          horizontal: "left"
        },
        getContentAnchorEl: null
      }}
      IconComponent={ArrowDropDownRoundedIcon}
      {...props}
    >
      {options.map(pair => (
        <MenuItem value={pair.value}>{pair.label}</MenuItem>
      ))}
    </SelectStyled>
  );
}

And the TextInput

import React, { useState } from "react";

import { TextField } from "@mui/material";
import { TextFieldProps } from "@mui/material/TextField";
import { styled } from "@mui/material/styles";

const BaseInput = styled(TextField)`
  width: 100%;

  .MuiOutlinedInput-root {
    height: 44px;
    width: 100%;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    border-color: #333333;
  }

  .MuiOutlinedInput-notchedOutline {
    border-color: #333333 !important;
  }

  &.Mui-focused .MuiOutlinedInput-notchedOutline {
    border-color: #333333 !important;
  }

  &:hover .MuiOutlinedInput-notchedOutline {
    border-color: #333333 !important;
  }

  &.Mui-disabled .MuiOutlinedInput-notchedOutline {
    border-color: #333333 !important;
    color: #8c8c8c !important;
  }

  &:hover &.Mui-disabled .MuiOutlinedInput-notchedOutline {
    border-color: #333333 !important;
  }

  &::placeholder {
    text-overflow: ellipsis;
    color: #8c8c8c !important;
    opacity: 100;
    font-size: 12px;
  }

  & label {
    visibility: visible;
    opacity: 1;
    font-weight: 540;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    line-height: 16px;
    color: #8c8c8c !important;
    padding-top: 5px;
  }
`;

const TextInput = (props: TextFieldProps) => {
  const [originalValue, setOriginalValue] = useState(props.value);
  const textColor = originalValue !== props.value ? "white" : "#8c8c8c";

  return (
    <BaseInput
      {...props}
      sx={{
        color: textColor,
        "& .MuiInputBase-input.Mui-disabled": {
          WebkitTextFillColor: textColor
        }
      }}
      variant="outlined"
    />
  );
};

export default TextInput;

Why is this throwing this error even though I'm using the text input like <TextInput />?