Merge icon with react-bootstrap collapse

Question

I want to use a expandable searchbar that hides when the state is false and show when the state is true, but trying to fit the icon with the searchbar using position absolute and left:0 hides the icon and makes it untochable and if i place both in the same position.

This is with only the icon in position absolute:

And this is with both things with position absolute:

Even if i could make the icon inside the second image visible the text input would overlap the icon.

How can i start the collapse from the icon while making it visible and adding some spacing for the text?

Here is the component's code:

import "../stylesheets/searchbar.css";
import { FaSearch } from "react-icons/fa";
import { useState, useRef } from "react";
import Collapse from "react-bootstrap/Collapse";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";

const Searchbar = () => {
  const formRef = useRef(null);
  const [open, setOpen] = useState(false);
  const [product, setProduct] = useState({
    name: "",
  });

  const handleChange = (e) => {
    setProduct({
      ...product,
      [e.target.name]: e.target.value,
    });
  };

  const handleKeyDown = (e) => {
    if (e.keyCode === 13) {
      formRef.current.submit();
    }
  };

  function handleSubmit(e) {
    e.preventDefault();
    setProduct(product);
    setOpen(!open);
  }

  return (
    <Container>
      <Row>
        <Col></Col>
        <Col>
          <span
            className="icon"
            onClick={() => setOpen(!open)}
            aria-controls="example-collapse-text"
            aria-expanded={open}
          >
            <FaSearch></FaSearch>
          </span>
          <Collapse in={open} className="expandible" dimension="width">
            <div onKeyDown={handleKeyDown} className="searchbar">
              <form onSubmit={handleSubmit}>
                <input
                  type="text"
                  name="name"
                  onChange={handleChange}
                  value={product.name}
                ></input>
              </form>
            </div>
          </Collapse>
        </Col>
      </Row>
    </Container>
  );
};

export default Searchbar;

And here is the css:

.container {
    position: relative;
    display: flex;
    margin: 3vh;
    border-radius: 25px;
    text-align: center;
    padding: 1vh;
}

.icon {
    position: absolute;
    left: 0;
}

.searchbar input {
    background-color: gray;
    border-radius: 25px;
}