How to create a component with changeable icon storybook react

I am new to storybook and need to create an input with icons that can be changed using select(storybook knob). I used oneOf but the icon stays the same as i've enclosed a specific icon in the icon div. How can I make one changeable icon? Like have choose between a home icon or facebook icon for example

component:

import React, { useState, useEffect } from "react";
import "./input-withIcon.css";
import { PropTypes } from "prop-types";
import Wallet from "../../icons-jsx/Wallet";
import Account from "../../icons-jsx/Account";

const InputWithIcon = ({ children, icon }) => {
  const [input, setInput] = useState("");

  useEffect(() => {
    adjustInputSize();
  }, [input]);

  const handleChange = (e) => {
    setInput(e.target.value);
  };
  const adjustInputSize = () => {
    const input = document.getElementById("iconInput");
    if (input.length < 1) {
      Input.style.width = 28;
    } else {
      input.style.width = input.length + 8 + "ch";
    }
  };
  return (
    <div className="input-container1">
      {icon && (
        <div className="icon-input__icon">
          <Wallet />
        </div>
      )}
      <div className="input-container-withIcon">
        <input
          type="text"
          required="required"
          className={`iicon-input ${icon && "icon-input__with-icon"}`}
          id="iconInput"
          value={input}
          onChange={handleChange}
        />
        <label className="ibl-icon-label">{children}</label>
      </div>
    </div>
  );
};

InputWithIcon.propTypes = {
  children: PropTypes.node,
  icon: PropTypes.oneOf(["wallet", "account"]),
};
export default InputWithIcon;

story

import IconInput from "../components/fields/input-with-icon/InputWithIcon";
import { withKnobs, text, select } from "@storybook/addon-knobs";
import { withInfo } from "@storybook/addon-info";

export default {
  title: "Input Fields",
  parameters: {
    component: IconInput,
    decorators: [withKnobs, withInfo],
    info: {
      text: `The Input field component is used to allow user input. It has a placeholder property, allowing the user to edit the placeholder has required. The input also has a children prop-type, which allows user to change the label and add other data. Do not add other data unless specified in your design. see source for usage`,
    },
    "in-dsm": {
      id: "",
      componentPath: "../components/fields/input-with-icon/InputWithIcon",
    },
  },
};

const iconOptions = { none: null, wallet: "wallet", account: "account" };
export const InputIcon = () => (
  <div>
    <IconInput icon={select("icon", iconOptions, iconOptions.wallet)}>
      {text("label", "Label")}
    </IconInput>
    <small className="hint-with-icon">{text("hint text", "Hint text")}</small>
  </div>
);```